sculp-js 1.10.0 → 1.10.2

package/lib/es/file.js

@@ -1,10 +1,10 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
 
-import { weAtob } from './we-decode.js';
+import { isObject } from './type.js';
 
 /**
  * 判断是否支持canvas
@@ -34,38 +34,111 @@ function chooseLocalFile(accept, changeCb) {
     };
     return inputObj;
 }
+/**
+ * 计算图片压缩后的尺寸
+ *
+ * @param {number} maxWidth
+ * @param {number} maxHeight
+ * @param {number} originWidth
+ * @param {number} originHeight
+ * @returns {*}
+ */
+function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
+    let width = originWidth, height = originHeight;
+    // 图片尺寸超过限制
+    if (originWidth > maxWidth || originHeight > maxHeight) {
+        if (originWidth / originHeight > maxWidth / maxHeight) {
+            // 更宽，按照宽度限定尺寸
+            width = maxWidth;
+            height = Math.round(maxWidth * (originHeight / originWidth));
+        }
+        else {
+            height = maxHeight;
+            width = Math.round(maxHeight * (originWidth / originHeight));
+        }
+    }
+    return { width, height };
+}
+/**
+ * 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
+ *
+ * @param {number} sizeKB
+ * @param {number} originWidth
+ * @param {number} originHeight
+ * @returns {*}
+ */
+function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
+    let targetWidth = originWidth, targetHeight = originHeight;
+    if (sizeKB <= 500) {
+        // [50KB, 500KB]
+        const maxWidth = 1200, maxHeight = 1200;
+        const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
+        targetWidth = width;
+        targetHeight = height;
+    }
+    else if (sizeKB < 10 * 1024) {
+        // (500KB, 10MB)
+        const maxWidth = 1600, maxHeight = 1600;
+        const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
+        targetWidth = width;
+        targetHeight = height;
+    }
+    else if (10 * 1024 <= sizeKB) {
+        // [10MB, Infinity)
+        const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2048, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2048;
+        const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
+        targetWidth = width;
+        targetHeight = height;
+    }
+    return { width: targetWidth, height: targetHeight };
+}
 /**
  * Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
- * @param {File | FileList} file 文件
- * @param {ICompressOptions} options
+ *
+ * @param {File | FileList} file 图片或图片数组
+ * @param {ICompressOptions} options 压缩图片配置项，default: {mime:'image/jpeg'}
  * @returns {Promise<object> | undefined}
  */
-function compressImg(file, options) {
-    console.assert(file instanceof File || file instanceof FileList, `${file} 必须是File或FileList类型`);
-    console.assert(supportCanvas(), `当前环境不支持 Canvas`);
-    let targetQuality = 0.52;
-    if (file instanceof File) {
+function compressImg(file, options = { mime: 'image/jpeg' }) {
+    if (!(file instanceof File || file instanceof FileList)) {
+        throw new Error(`${file} require be File or FileList`);
+    }
+    else if (!supportCanvas()) {
+        throw new Error(`Current runtime environment not support Canvas`);
+    }
+    const { quality, mime = 'image/jpeg' } = isObject(options) ? options : {};
+    let targetQuality = quality;
+    if (quality) {
+        targetQuality = quality;
+    }
+    else if (file instanceof File) {
         const sizeKB = +parseInt((file.size / 1024).toFixed(2));
-        if (sizeKB < 1 * 1024) {
+        if (sizeKB < 1 * 50) {
+            targetQuality = 1;
+        }
+        else if (sizeKB < 1 * 1024) {
             targetQuality = 0.85;
         }
-        else if (sizeKB >= 1 * 1024 && sizeKB < 5 * 1024) {
-            targetQuality = 0.62;
+        else if (sizeKB < 5 * 1024) {
+            targetQuality = 0.8;
         }
-        else if (sizeKB >= 5 * 1024) {
-            targetQuality = 0.52;
+        else {
+            targetQuality = 0.75;
         }
     }
-    if (options.quality) {
-        targetQuality = options.quality;
-    }
     if (file instanceof FileList) {
-        return Promise.all(Array.from(file).map(el => compressImg(el, { mime: options.mime, quality: targetQuality }))); // 如果是 file 数组返回 Promise 数组
+        return Promise.all(Array.from(file).map(el => compressImg(el, { mime: mime, quality: targetQuality }))); // 如果是 file 数组返回 Promise 数组
     }
     else if (file instanceof File) {
         return new Promise(resolve => {
+            const ext = {
+                'image/webp': 'webp',
+                'image/jpeg': 'jpg',
+                'image/png': 'png'
+            };
+            const fileName = [...file.name.split('.').slice(0, -1), ext[mime]].join('.');
             const sizeKB = +parseInt((file.size / 1024).toFixed(2));
-            if (+(file.size / 1024).toFixed(2) < 200) {
+            if (+(file.size / 1024).toFixed(2) < 50) {
                 resolve({
                     file: file
                 });
@@ -78,57 +151,22 @@ function compressImg(file, options) {
                     image.onload = () => {
                         const canvas = document.createElement('canvas'); // 创建 canvas 元素
                         const context = canvas.getContext('2d');
-                        let targetWidth = image.width;
-                        let targetHeight = image.height;
                         const originWidth = image.width;
                         const originHeight = image.height;
-                        if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
-                            const maxWidth = 1600, maxHeight = 1600;
-                            targetWidth = originWidth;
-                            targetHeight = originHeight;
-                            // 图片尺寸超过的限制
-                            if (originWidth > maxWidth || originHeight > maxHeight) {
-                                if (originWidth / originHeight > maxWidth / maxHeight) {
-                                    // 更宽，按照宽度限定尺寸
-                                    targetWidth = maxWidth;
-                                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
-                                }
-                                else {
-                                    targetHeight = maxHeight;
-                                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
-                                }
-                            }
-                        }
-                        if (10 * 1024 <= sizeKB && sizeKB <= 20 * 1024) {
-                            const maxWidth = 1400, maxHeight = 1400;
-                            targetWidth = originWidth;
-                            targetHeight = originHeight;
-                            // 图片尺寸超过的限制
-                            if (originWidth > maxWidth || originHeight > maxHeight) {
-                                if (originWidth / originHeight > maxWidth / maxHeight) {
-                                    // 更宽，按照宽度限定尺寸
-                                    targetWidth = maxWidth;
-                                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
-                                }
-                                else {
-                                    targetHeight = maxHeight;
-                                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
-                                }
-                            }
-                        }
-                        canvas.width = targetWidth;
-                        canvas.height = targetHeight;
-                        context.clearRect(0, 0, targetWidth, targetHeight);
-                        context.drawImage(image, 0, 0, targetWidth, targetHeight); // 绘制 canvas
-                        const canvasURL = canvas.toDataURL(options.mime, targetQuality);
-                        const buffer = weAtob(canvasURL.split(',')[1]);
+                        const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
+                        canvas.width = width;
+                        canvas.height = height;
+                        context.clearRect(0, 0, width, height);
+                        context.drawImage(image, 0, 0, width, height); // 绘制 canvas
+                        const canvasURL = canvas.toDataURL(mime, targetQuality);
+                        const buffer = atob(canvasURL.split(',')[1]);
                         let length = buffer.length;
                         const bufferArray = new Uint8Array(new ArrayBuffer(length));
                         while (length--) {
                             bufferArray[length] = buffer.charCodeAt(length);
                         }
-                        const miniFile = new File([bufferArray], file.name, {
-                            type: options.mime
+                        const miniFile = new File([bufferArray], fileName, {
+                            type: mime
                         });
                         resolve({
                             file: miniFile,

package/lib/es/func.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/isEqual.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/math.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/number.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/object.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/path.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/qs.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/random.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/string.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/tooltip.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
@@ -8,16 +8,19 @@ import { getStrWidthPx } from './dom.js';
 import { isString } from './type.js';
 
 /**
- * @title tooltip
+ * 自定义的 tooltip, 支持鼠标移动动悬浮提示
  * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
  * Created by chendeqiao on 2017/5/8.
  * @example
- *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
- * 		onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">title content </span>
+ *  <span onmouseleave="handleMouseLeave('#root')"
+ *        onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+ * 		    onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
+ *    title content
+ *  </span>
  */
 /**
  * 自定义title提示功能的mouseenter事件句柄
- * @param {ITooltipParams} param1
+ * @param {ITooltipParams} param
  * @returns {*}
  */
 function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {

package/lib/es/tree.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/type.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/unique.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/url.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/validator.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/variable.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/watermark.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/es/we-decode.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.10.0
+ * sculp-js v1.10.2
  * (c) 2023-present chandq
  * Released under the MIT License.
  */

package/lib/index.d.ts

@@ -106,6 +106,23 @@ declare function arrayEach<V>(array: ArrayLike<V>, iterator: (val: V, idx: numbe
  * @param {ArrayLike<V>} array 数组
  * @param {(val: V, idx: number) => Promise<any>} iterator  支持Promise类型的回调函数
  * @param {boolean} reverse  是否反向遍历
+ * @example
+ *    使用范例如下:
+ * const start = async () => {
+ *   await arrayEachAsync(result, async (item) => {
+ *     await request(item);
+ *     count++;
+ *   })
+ *   console.log('发送次数', count);
+ * }
+
+ * for await...of 使用范例如下
+ * const loadImages =  async (images) => {
+ *   for await (const item of images) {
+ *      await request(item);
+ *      count++;
+ *    }
+ * }
  */
 declare function arrayEachAsync<V>(array: ArrayLike<V>, iterator: (val: V, idx: number) => Promise<any> | any, reverse?: boolean): Promise<void>;
 /**
@@ -589,11 +606,12 @@ interface ICompressOptions {
 }
 /**
  * Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
- * @param {File | FileList} file 文件
- * @param {ICompressOptions} options
+ *
+ * @param {File | FileList} file 图片或图片数组
+ * @param {ICompressOptions} options 压缩图片配置项，default: {mime:'image/jpeg'}
  * @returns {Promise<object> | undefined}
  */
-declare function compressImg(file: File | FileList, options: ICompressOptions): Promise<object> | undefined;
+declare function compressImg(file: File | FileList, options?: ICompressOptions): Promise<object> | undefined;
 
 interface ICanvasWM {
     rootContainer?: HTMLElement | string;
@@ -760,12 +778,15 @@ interface UniqueString {
 declare const uniqueString: UniqueString;
 
 /**
- * @title tooltip
+ * 自定义的 tooltip, 支持鼠标移动动悬浮提示
  * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
  * Created by chendeqiao on 2017/5/8.
  * @example
- *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
- * 		onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">title content </span>
+ *  <span onmouseleave="handleMouseLeave('#root')"
+ *        onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+ * 		    onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
+ *    title content
+ *  </span>
  */
 interface ITooltipParams {
     rootContainer: HTMLElement | string;
@@ -776,7 +797,7 @@ interface ITooltipParams {
 }
 /**
  * 自定义title提示功能的mouseenter事件句柄
- * @param {ITooltipParams} param1
+ * @param {ITooltipParams} param
  * @returns {*}
  */
 declare function handleMouseEnter({ rootContainer, title, event, bgColor, color }: ITooltipParams): void;