zartui 2.1.30 → 2.1.32

package/es/index.js

@@ -76,7 +76,7 @@ import TextEllipsis from './text-ellipsis';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.1.30';
+var version = '2.1.32';
 function install(Vue) {
   var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, SpeechRecognizer, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, TextEllipsis, Timeline, Toast, Uploader];
   components.forEach(function (item) {

package/es/media-picker/index.js

@@ -56,6 +56,10 @@ export default createComponent({
       type: Boolean,
       default: false
     },
+    keepFileType: {
+      type: Boolean,
+      default: false
+    },
     mediaList: {
       type: Array,
       default: function _default() {
@@ -568,6 +572,21 @@ export default createComponent({
       }
       return validFiles;
     },
+    /**
+     * 根据 MIME 类型获取文件扩展名
+     */
+    getExtensionFromMimeType: function getExtensionFromMimeType(mimeType) {
+      var mimeToExt = {
+        'image/jpeg': 'jpg',
+        'image/jpg': 'jpg',
+        'image/png': 'png',
+        'image/gif': 'gif',
+        'image/webp': 'webp',
+        'image/bmp': 'bmp',
+        'image/svg+xml': 'svg'
+      };
+      return mimeToExt[mimeType] || 'jpg';
+    },
     /**
      * 转换图片文件，压缩、加水印，返回Media格式的图片
      * @param files 图片文件
@@ -577,7 +596,7 @@ export default createComponent({
       var _this6 = this;
       var promisesTodo = [];
       var resizeOptions = new ResizeOptions(this.maxImageSideLength);
-      var compressOptions = new CompressOptions(this.maxImageFileSize);
+      var compressOptions = new CompressOptions(this.maxImageFileSize, this.keepFileType);
       var _loop = function _loop() {
         var inputFile = files[i];
         var watermarkEnabled = _this6.watermarkOptions && _this6.watermarkOptions.watermarkConfigString && checkWatermarkConfigSupported(_this6.watermarkOptions.watermarkConfigString);
@@ -605,7 +624,9 @@ export default createComponent({
             return Promise.resolve();
           }
           return file2DataURL(f).then(function (base64) {
-            var uniqueFileName = getUniqueFileName(f, 'jpg');
+            // 根据 keepFileType 决定使用的扩展名
+            var ext = _this6.keepFileType ? _this6.getExtensionFromMimeType(f.type) : 'jpg';
+            var uniqueFileName = getUniqueFileName(f, ext);
             return Promise.resolve({
               showSrc: base64,
               type: MediaType.PHOTO,

package/lib/index.js

@@ -161,7 +161,7 @@ var _toast = _interopRequireDefault(require("./toast"));
 exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 exports.Uploader = _uploader.default;
-var version = exports.version = '2.1.30';
+var version = exports.version = '2.1.32';
 function install(Vue) {
   var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _speechRecognizer.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _textEllipsis.default, _timeline.default, _toast.default, _uploader.default];
   components.forEach(function (item) {

package/lib/media-picker/index.js

@@ -62,6 +62,10 @@ var _default2 = exports.default = createComponent({
       type: Boolean,
       default: false
     },
+    keepFileType: {
+      type: Boolean,
+      default: false
+    },
     mediaList: {
       type: Array,
       default: function _default() {
@@ -574,6 +578,21 @@ var _default2 = exports.default = createComponent({
       }
       return validFiles;
     },
+    /**
+     * 根据 MIME 类型获取文件扩展名
+     */
+    getExtensionFromMimeType: function getExtensionFromMimeType(mimeType) {
+      var mimeToExt = {
+        'image/jpeg': 'jpg',
+        'image/jpg': 'jpg',
+        'image/png': 'png',
+        'image/gif': 'gif',
+        'image/webp': 'webp',
+        'image/bmp': 'bmp',
+        'image/svg+xml': 'svg'
+      };
+      return mimeToExt[mimeType] || 'jpg';
+    },
     /**
      * 转换图片文件，压缩、加水印，返回Media格式的图片
      * @param files 图片文件
@@ -583,7 +602,7 @@ var _default2 = exports.default = createComponent({
       var _this6 = this;
       var promisesTodo = [];
       var resizeOptions = new _appMediaUtils.ResizeOptions(this.maxImageSideLength);
-      var compressOptions = new _appMediaUtils.CompressOptions(this.maxImageFileSize);
+      var compressOptions = new _appMediaUtils.CompressOptions(this.maxImageFileSize, this.keepFileType);
       var _loop = function _loop() {
         var inputFile = files[i];
         var watermarkEnabled = _this6.watermarkOptions && _this6.watermarkOptions.watermarkConfigString && (0, _appMediaUtils.checkWatermarkConfigSupported)(_this6.watermarkOptions.watermarkConfigString);
@@ -611,7 +630,9 @@ var _default2 = exports.default = createComponent({
             return Promise.resolve();
           }
           return (0, _appMediaUtils.file2DataURL)(f).then(function (base64) {
-            var uniqueFileName = (0, _mediaUtil.getUniqueFileName)(f, 'jpg');
+            // 根据 keepFileType 决定使用的扩展名
+            var ext = _this6.keepFileType ? _this6.getExtensionFromMimeType(f.type) : 'jpg';
+            var uniqueFileName = (0, _mediaUtil.getUniqueFileName)(f, ext);
             return Promise.resolve({
               showSrc: base64,
               type: _type.MediaType.PHOTO,

package/lib/zart.js

@@ -19862,7 +19862,7 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
       const tile = buildTile(canvas, watermark);
       if (tile) {
         tiles.push(tile);
-        totalHeight += tile.size.height + CONTENT_PADDING;
+        totalHeight += tile.size.height + tile.style.paddingTop + tile.style.paddingBottom;
       }
     }
     if (totalHeight <= 0) {
@@ -19872,19 +19872,15 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
     }
     const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
     let baseOrigin = new Point(contentPadding, contentPadding);
-    let titlePadding = 0;
     if (groupPosition === "center" /* Center */) {
       baseOrigin = new Point(
         contentPadding,
         Math.round((canvas.height - totalHeight) / 2)
       );
     } else if (groupPosition === "bottom" /* Bottom */) {
-      tiles.forEach((item) => {
-        titlePadding += item.style.paddingTop + item.style.paddingBottom;
-      });
       baseOrigin = new Point(
         contentPadding,
-        canvas.height - totalHeight - contentPadding - titlePadding
+        canvas.height - totalHeight - contentPadding
       );
     } else if (groupPosition === "top" /* Top */) {
       baseOrigin = new Point(contentPadding, contentPadding);
@@ -20018,9 +20014,10 @@ function image2Canvas(img, type, width, height) {
   canvas.height = _height;
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "transparent";
-    if (type === "image/jpeg") {
+    const needWhiteBackground = type === "image/jpeg" || type === "image/jpg" || type === "image/bmp";
+    if (needWhiteBackground) {
       ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, _width, _height);
     }
     ctx.drawImage(img, 0, 0, _width, _height);
     return Promise.resolve(canvas);
@@ -20033,18 +20030,20 @@ function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
   image.src = canvas.toDataURL(type, quality);
   return Promise.resolve(image);
 }
-function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
+function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8, forceFileType) {
   return new Promise((resolve, reject) => {
+    const blobType = type === "image/gif" ? "image/png" : type;
     canvas.toBlob(
       (blob) => {
         if (!blob) {
           reject(new Error("canvas文件导出失败"));
         } else {
-          const file = new File([blob], fileName, { lastModified, type });
+          const fileType = forceFileType || type;
+          const file = new File([blob], fileName, { lastModified, type: fileType });
           resolve(file);
         }
       },
-      type,
+      blobType,
       quality
     );
   });
@@ -20105,13 +20104,14 @@ var ResizeOptions = class {
   }
 };
 var CompressOptions = class {
-  // 图片大小限制，单位kb
-  constructor(photoFileSizeLimit) {
+  // 是否保持原始文件类型
+  constructor(photoFileSizeLimit, keepFileType = false) {
     if (checkIsUndefinedOrNull(photoFileSizeLimit)) {
       this.photoFileSizeLimit = PHOTO_FILE_SIZE_LIMIT;
     } else {
       this.photoFileSizeLimit = photoFileSizeLimit;
     }
+    this.keepFileType = keepFileType;
   }
 };
 var ImageProcessor = class {
@@ -20125,12 +20125,15 @@ var ImageProcessor = class {
   process() {
     const filename = this.file.name;
     const { lastModified } = this.file;
-    let fileType = this.file.type;
-    if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
-      fileType = "image/jpeg";
-    }
-    if (fileType === "image/gif") {
-      fileType = "image/png";
+    const originalFileType = this.file.type;
+    let fileType = originalFileType;
+    if (!this.compressOptions.keepFileType) {
+      if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
+        fileType = "image/jpeg";
+      }
+      if (fileType === "image/gif") {
+        fileType = "image/png";
+      }
     }
     return file2Image(this.file).then((img) => {
       return resize(img, {
@@ -20142,18 +20145,43 @@ var ImageProcessor = class {
       const canvas = result;
       return yield renderWatermark(canvas, this.watermarkOptions);
     })).then((canvas) => {
-      const exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      let exportFilename;
+      if (this.compressOptions.keepFileType) {
+        const ext = this.getExtensionFromMimeType(fileType);
+        exportFilename = filename.replace(/\.[^.]+$/, "") + "." + ext;
+      } else {
+        exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      }
       return this.compress(
         canvas,
         exportFilename,
         lastModified,
         fileType,
-        DEFAULT_JPEG_QUALITY
+        DEFAULT_JPEG_QUALITY,
+        -1,
+        originalFileType
+        // 传入原始文件类型，用于GIF等特殊格式
       );
     });
   }
-  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1) {
-    return canvas2File(canvas, filename, lastModified, type, quality).then(
+  /**
+   * 根据 MIME 类型获取文件扩展名
+   */
+  getExtensionFromMimeType(mimeType) {
+    const mimeToExt = {
+      "image/jpeg": "jpg",
+      "image/jpg": "jpg",
+      "image/png": "png",
+      "image/gif": "gif",
+      "image/webp": "webp",
+      "image/bmp": "bmp",
+      "image/svg+xml": "svg"
+    };
+    return mimeToExt[mimeType] || "jpg";
+  }
+  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1, originalFileType) {
+    const forceFileType = originalFileType === "image/gif" ? originalFileType : void 0;
+    return canvas2File(canvas, filename, lastModified, type, quality, forceFileType).then(
       (file) => {
         let qualityStep = JPEG_QUALITY_STEP;
         if (file.size > this.compressOptions.photoFileSizeLimit * 1024) {
@@ -20173,7 +20201,8 @@ var ImageProcessor = class {
             lastModified,
             type,
             this.roundToDecimalPlace(nextCompressQuality, 2),
-            file.size
+            file.size,
+            originalFileType
           );
         } else {
           return Promise.resolve(file);
@@ -24835,6 +24864,10 @@ var media_picker_createNamespace = Object(utils["b" /* createNamespace */])('med
       type: Boolean,
       default: false
     },
+    keepFileType: {
+      type: Boolean,
+      default: false
+    },
     mediaList: {
       type: Array,
       default: function _default() {
@@ -25347,6 +25380,21 @@ var media_picker_createNamespace = Object(utils["b" /* createNamespace */])('med
       }
       return validFiles;
     },
+    /**
+     * 根据 MIME 类型获取文件扩展名
+     */
+    getExtensionFromMimeType: function getExtensionFromMimeType(mimeType) {
+      var mimeToExt = {
+        'image/jpeg': 'jpg',
+        'image/jpg': 'jpg',
+        'image/png': 'png',
+        'image/gif': 'gif',
+        'image/webp': 'webp',
+        'image/bmp': 'bmp',
+        'image/svg+xml': 'svg'
+      };
+      return mimeToExt[mimeType] || 'jpg';
+    },
     /**
      * 转换图片文件，压缩、加水印，返回Media格式的图片
      * @param files 图片文件
@@ -25356,7 +25404,7 @@ var media_picker_createNamespace = Object(utils["b" /* createNamespace */])('med
       var _this6 = this;
       var promisesTodo = [];
       var resizeOptions = new ResizeOptions(this.maxImageSideLength);
-      var compressOptions = new CompressOptions(this.maxImageFileSize);
+      var compressOptions = new CompressOptions(this.maxImageFileSize, this.keepFileType);
       var _loop = function _loop() {
         var inputFile = files[i];
         var watermarkEnabled = _this6.watermarkOptions && _this6.watermarkOptions.watermarkConfigString && checkWatermarkConfigSupported(_this6.watermarkOptions.watermarkConfigString);
@@ -25384,7 +25432,9 @@ var media_picker_createNamespace = Object(utils["b" /* createNamespace */])('med
             return Promise.resolve();
           }
           return file2DataURL(f).then(function (base64) {
-            var uniqueFileName = getUniqueFileName(f, 'jpg');
+            // 根据 keepFileType 决定使用的扩展名
+            var ext = _this6.keepFileType ? _this6.getExtensionFromMimeType(f.type) : 'jpg';
+            var uniqueFileName = getUniqueFileName(f, ext);
             return Promise.resolve({
               showSrc: base64,
               type: MediaType.PHOTO,
@@ -35625,7 +35675,7 @@ var uploader_createNamespace = Object(utils["b" /* createNamespace */])('uploade
 
 
 
-var es_version = '2.1.30';
+var es_version = '2.1.32';
 function install(Vue) {
   var components = [action_sheet, es_area, avatar, back_top, badge, es_button, calendar, cascader, cell, cell_group, es_checkbox, checkbox_group, col, collapse, collapse_item, count_down, datetime_picker, dialog, divider, dropdown_item, dropdown_menu, empty, es_field, fold_dialog, es_form, grid, grid_item, hierarchy_select, es_icon, es_image, image_preview, index_anchor, index_bar, es_info, lazyload, es_list, es_loading, locale["a" /* default */], media_picker, media_player, multiple_picker, nav_bar, notice_bar, number_keyboard, es_overlay, password_input, es_picker, popover, popup, pull_refresh, es_radio, radio_group, rate, row, search, signature, skeleton, slider, speech_recognizer, es_step, stepper, steps, es_sticky, swipe, swipe_cell, swipe_item, es_switch, switch_cell, tab, tabbar, tabbar_item, table, tabs, es_tag, text_ellipsis, timeline, es_toast, uploader];
   components.forEach(function (item) {