vue-editify 0.0.1 → 0.0.12

package/lib/editify.es.js

@@ -1322,6 +1322,98 @@ const file$1 = {
     return new File([u8arr], fileName, {
       type: mime
     });
+  },
+  /**
+   * 图片压缩方法
+   * @param {*} file 需要压缩的图片File文件
+   * @param {*} opts 压缩参数
+   */
+  compressImage(file2, opts) {
+    const options = {
+      //压缩图片的宽，单位px，如果不设置默认为原图宽
+      width: null,
+      //压缩图片质量，默认为原图的0.8
+      quality: 0.8,
+      //图片类型，jpeg或者webp，默认为jpeg
+      mimeType: "jpeg",
+      //压缩后的最大值，单位kb，默认为0表示不设置此值
+      maxSize: 0,
+      //小于该大小的图片不进行压缩，单位kb，默认为0表示任何图片都要压缩
+      minSize: 0
+    };
+    if (common$1.isObject(opts)) {
+      if (number$1.isNumber(opts.width)) {
+        options.width = opts.width;
+      }
+      if (number$1.isNumber(opts.quality) && opts.quality >= 0 && opts.quality <= 1) {
+        options.quality = opts.quality;
+      }
+      if (opts.mimeType == "jpeg" || opts.mimeType == "webp") {
+        options.mimeType = opts.mimeType;
+      }
+      if (number$1.isNumber(opts.maxSize)) {
+        options.maxSize = opts.maxSize;
+      }
+      if (number$1.isNumber(opts.minSize)) {
+        options.minSize = opts.minSize;
+      }
+    }
+    const createFile = (canvas, fileName, quality) => {
+      let url2 = canvas.toDataURL("image/" + options.mimeType, quality);
+      let file3 = this.dataBase64toFile(url2, fileName);
+      if (options.maxSize > 0 && file3.size > options.maxSize * 1024) {
+        quality = quality <= 0 ? 0 : Number((quality - 0.01).toFixed(2));
+        const res = createFile(canvas, fileName, quality);
+        url2 = res.url;
+        file3 = res.file;
+        quality = res.quality;
+      }
+      return {
+        file: file3,
+        url: url2,
+        quality
+      };
+    };
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.readAsDataURL(file2);
+      reader.onload = () => {
+        let url2 = reader.result;
+        let img = new Image();
+        img.src = url2;
+        img.onload = () => {
+          if (options.minSize > 0 && file2.size <= options.minSize * 1024) {
+            resolve({
+              file: file2,
+              url: url2,
+              quality: 1,
+              width: img.width,
+              height: img.height
+            });
+            return;
+          }
+          let canvas = document.createElement("canvas");
+          let context = canvas.getContext("2d");
+          canvas.width = options.width || img.width;
+          canvas.height = options.width ? options.width / (img.width / img.height) : img.height;
+          context.drawImage(img, 0, 0, canvas.width, canvas.height);
+          let index = file2.name.lastIndexOf(".");
+          const fileName = file2.name.substring(0, index) + "." + options.mimeType;
+          let res = createFile(canvas, fileName, options.quality);
+          resolve({
+            ...res,
+            width: canvas.width,
+            height: canvas.height
+          });
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load image file"));
+        };
+      };
+      reader.onerror = () => {
+        reject(new Error("Failed to load image file"));
+      };
+    });
   }
 };
 const platform$1 = {
@@ -6081,6 +6173,98 @@ const file = {
     return new File([u8arr], fileName, {
       type: mime
     });
+  },
+  /**
+   * 图片压缩方法
+   * @param {*} file 需要压缩的图片File文件
+   * @param {*} opts 压缩参数
+   */
+  compressImage(file2, opts) {
+    const options = {
+      //压缩图片的宽，单位px，如果不设置默认为原图宽
+      width: null,
+      //压缩图片质量，默认为原图的0.8
+      quality: 0.8,
+      //图片类型，jpeg或者webp，默认为jpeg
+      mimeType: "jpeg",
+      //压缩后的最大值，单位kb，默认为0表示不设置此值
+      maxSize: 0,
+      //小于该大小的图片不进行压缩，单位kb，默认为0表示任何图片都要压缩
+      minSize: 0
+    };
+    if (common.isObject(opts)) {
+      if (number.isNumber(opts.width)) {
+        options.width = opts.width;
+      }
+      if (number.isNumber(opts.quality) && opts.quality >= 0 && opts.quality <= 1) {
+        options.quality = opts.quality;
+      }
+      if (opts.mimeType == "jpeg" || opts.mimeType == "webp") {
+        options.mimeType = opts.mimeType;
+      }
+      if (number.isNumber(opts.maxSize)) {
+        options.maxSize = opts.maxSize;
+      }
+      if (number.isNumber(opts.minSize)) {
+        options.minSize = opts.minSize;
+      }
+    }
+    const createFile = (canvas, fileName, quality) => {
+      let url2 = canvas.toDataURL("image/" + options.mimeType, quality);
+      let file3 = this.dataBase64toFile(url2, fileName);
+      if (options.maxSize > 0 && file3.size > options.maxSize * 1024) {
+        quality = quality <= 0 ? 0 : Number((quality - 0.01).toFixed(2));
+        const res = createFile(canvas, fileName, quality);
+        url2 = res.url;
+        file3 = res.file;
+        quality = res.quality;
+      }
+      return {
+        file: file3,
+        url: url2,
+        quality
+      };
+    };
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.readAsDataURL(file2);
+      reader.onload = () => {
+        let url2 = reader.result;
+        let img = new Image();
+        img.src = url2;
+        img.onload = () => {
+          if (options.minSize > 0 && file2.size <= options.minSize * 1024) {
+            resolve({
+              file: file2,
+              url: url2,
+              quality: 1,
+              width: img.width,
+              height: img.height
+            });
+            return;
+          }
+          let canvas = document.createElement("canvas");
+          let context = canvas.getContext("2d");
+          canvas.width = options.width || img.width;
+          canvas.height = options.width ? options.width / (img.width / img.height) : img.height;
+          context.drawImage(img, 0, 0, canvas.width, canvas.height);
+          let index = file2.name.lastIndexOf(".");
+          const fileName = file2.name.substring(0, index) + "." + options.mimeType;
+          let res = createFile(canvas, fileName, options.quality);
+          resolve({
+            ...res,
+            width: canvas.width,
+            height: canvas.height
+          });
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load image file"));
+        };
+      };
+      reader.onerror = () => {
+        reject(new Error("Failed to load image file"));
+      };
+    });
   }
 };
 const platform = {
@@ -19562,7 +19746,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const InsertTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-0277a84c"]]);
-const Menu_vue_vue_type_style_index_0_scoped_01d538d0_lang = "";
+const Menu_vue_vue_type_style_index_0_scoped_4c7850ff_lang = "";
 const _sfc_main$1 = {
   name: "Menu",
   props: {
@@ -20481,57 +20665,59 @@ const _sfc_main$1 = {
         }
         if (obj.common.isObject(this.$parent.config.extends)) {
           const configuration = this.$parent.config.extends[this.name];
-          return h(
-            Button,
-            {
-              ...props,
-              ref: "btn",
-              type: configuration.type || "default",
-              title: configuration.title || "",
-              leftBorder: configuration.leftBorder || false,
-              rightBorder: configuration.rightBorder || false,
-              disabled: configuration.disabled || this.disabled || this.$parent.disabled,
-              hideScroll: configuration.hideScroll || false,
-              active: configuration.active || false,
-              selectConfig: {
-                width: configuration.width,
-                maxHeight: configuration.maxHeight,
-                options: configuration.options
-              },
-              displayConfig: {
-                width: configuration.width,
-                maxHeight: configuration.maxHeight,
-                value: configuration.value,
-                options: configuration.options
-              },
-              color: this.$parent.color,
-              onLayerShow: () => {
-                if (typeof configuration.onLayerShow == "function") {
-                  configuration.onLayerShow.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
-                }
-              },
-              onLayerShown: () => {
-                if (typeof configuration.onLayerShown == "function") {
-                  configuration.onLayerShown.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
-                }
-              },
-              onLayerHidden: () => {
-                if (typeof configuration.onLayerHidden == "function") {
-                  configuration.onLayerHidden.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
+          if (configuration) {
+            return h(
+              Button,
+              {
+                ...props,
+                ref: "btn",
+                type: configuration.type || "default",
+                title: configuration.title || "",
+                leftBorder: configuration.leftBorder || false,
+                rightBorder: configuration.rightBorder || false,
+                disabled: configuration.disabled || this.disabled || this.$parent.disabled,
+                hideScroll: configuration.hideScroll || false,
+                active: configuration.active || false,
+                selectConfig: {
+                  width: configuration.width,
+                  maxHeight: configuration.maxHeight,
+                  options: configuration.options
+                },
+                displayConfig: {
+                  width: configuration.width,
+                  maxHeight: configuration.maxHeight,
+                  value: configuration.value,
+                  options: configuration.options
+                },
+                color: this.$parent.color,
+                onLayerShow: () => {
+                  if (typeof configuration.onLayerShow == "function") {
+                    configuration.onLayerShow.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
+                  }
+                },
+                onLayerShown: () => {
+                  if (typeof configuration.onLayerShown == "function") {
+                    configuration.onLayerShown.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
+                  }
+                },
+                onLayerHidden: () => {
+                  if (typeof configuration.onLayerHidden == "function") {
+                    configuration.onLayerHidden.apply(this.$parent.$parent, [this.name, this.$refs.btn]);
+                  }
+                },
+                onOperate: (name, val) => {
+                  if (typeof configuration.onOperate == "function") {
+                    configuration.onOperate.apply(this.$parent.$parent, [name, val, this.$refs.btn]);
+                  }
                 }
               },
-              onOperate: (name, val) => {
-                if (typeof configuration.onOperate == "function") {
-                  configuration.onOperate.apply(this.$parent.$parent, [name, val, this.$refs.btn]);
-                }
+              {
+                default: configuration.default || null,
+                layer: configuration.layer || null,
+                option: configuration.option || null
               }
-            },
-            {
-              default: configuration.default || null,
-              layer: configuration.layer || null,
-              option: configuration.option || null
-            }
-          );
+            );
+          }
         }
         return null;
       }
@@ -20780,7 +20966,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }), 256))
   ], 14, _hoisted_1$1);
 }
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-01d538d0"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-4c7850ff"]]);
 const Editify_vue_vue_type_style_index_0_scoped_be97ae51_lang = "";
 const _sfc_main = {
   name: "editify",
@@ -22439,7 +22625,7 @@ const i18n = (locale) => {
     return translations[locale][key];
   };
 };
-const version = "0.0.1";
+const version = "0.0.11";
 const install = (app, props) => {
   const locale = (props ? props.locale : "zh_CN") || "zh_CN";
   app.provide("$editTrans", i18n(locale));