sculp-js 1.10.0 → 1.10.2

package/lib/umd/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.
  */
@@ -45,6 +45,23 @@
      * @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++;
+     *    }
+     * }
      */
     async function arrayEachAsync(array, iterator, reverse = false) {
         if (reverse) {
@@ -1360,103 +1377,6 @@
         });
     }
 
-    const b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
-    // eslint-disable-next-line
-    const b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
-    /**
-     * 字符串编码成Base64, 平替浏览器的btoa, 不包含中文的处理 （适用于任何环境，包括小程序）
-     * @param {string} string
-     * @returns {string}
-     */
-    function weBtoa(string) {
-        // 同window.btoa: 字符串编码成Base64
-        string = String(string);
-        let bitmap, a, b, c, result = '', i = 0;
-        const strLen = string.length;
-        const rest = strLen % 3;
-        for (; i < strLen;) {
-            if ((a = string.charCodeAt(i++)) > 255 || (b = string.charCodeAt(i++)) > 255 || (c = string.charCodeAt(i++)) > 255)
-                throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
-            bitmap = (a << 16) | (b << 8) | c;
-            result +=
-                b64.charAt((bitmap >> 18) & 63) +
-                    b64.charAt((bitmap >> 12) & 63) +
-                    b64.charAt((bitmap >> 6) & 63) +
-                    b64.charAt(bitmap & 63);
-        }
-        return rest ? result.slice(0, rest - 3) + '==='.substring(rest) : result;
-    }
-    /**
-     * Base64解码为原始字符串，平替浏览器的atob, 不包含中文的处理（适用于任何环境，包括小程序）
-     * @param {string} string
-     * @returns {string}
-     */
-    function weAtob(string) {
-        // 同window.atob: Base64解码为原始字符串
-        string = String(string).replace(/[\t\n\f\r ]+/g, '');
-        if (!b64re.test(string))
-            throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
-        string += '=='.slice(2 - (string.length & 3));
-        let bitmap, result = '', r1, r2, i = 0;
-        for (const strLen = string.length; i < strLen;) {
-            bitmap =
-                (b64.indexOf(string.charAt(i++)) << 18) |
-                    (b64.indexOf(string.charAt(i++)) << 12) |
-                    ((r1 = b64.indexOf(string.charAt(i++))) << 6) |
-                    (r2 = b64.indexOf(string.charAt(i++)));
-            result +=
-                r1 === 64
-                    ? String.fromCharCode((bitmap >> 16) & 255)
-                    : r2 === 64
-                        ? String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255)
-                        : String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255, bitmap & 255);
-        }
-        return result;
-    }
-    // function b64DecodeUnicode(str) {
-    //   return decodeURIComponent(
-    //     exports.weAtob(str).replace(/(.)/g, function (p) {
-    //       let code = p.charCodeAt(0).toString(16).toUpperCase();
-    //       if (code.length < 2) {
-    //         code = '0' + code;
-    //       }
-    //       return '%' + code;
-    //     })
-    //   );
-    // }
-    // function base64_url_decode(str) {
-    //   let output = str.replace(/-/g, '+').replace(/_/g, '/');
-    //   switch (output.length % 4) {
-    //     case 0:
-    //       break;
-    //     case 2:
-    //       output += '==';
-    //       break;
-    //     case 3:
-    //       output += '=';
-    //       break;
-    //     default:
-    //       throw new Error('Illegal base64url string!');
-    //   }
-    //   try {
-    //     return b64DecodeUnicode(output);
-    //   } catch (err) {
-    //     return exports.weAtob(output);
-    //   }
-    // }
-    // export function weAppJwtDecode(token, options) {
-    //   if (typeof token !== 'string') {
-    //     throw new Error('Invalid token specified');
-    //   }
-    //   options = options || {};
-    //   const pos = options.header === true ? 0 : 1;
-    //   try {
-    //     return JSON.parse(base64_url_decode(token.split('.')[pos]));
-    //   } catch (e) {
-    //     throw new Error('Invalid token specified: ' + (e as Error).message);
-    //   }
-    // }
-
     /**
      * 判断是否支持canvas
      * @returns {boolean}
@@ -1485,38 +1405,111 @@
         };
         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
                     });
@@ -1529,57 +1522,22 @@
                         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,
@@ -2032,16 +1990,19 @@
     };
 
     /**
-     * @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' }) {
@@ -2494,6 +2455,103 @@
         return +parseFloat(Number(num).toPrecision(precision));
     }
 
+    const b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+    // eslint-disable-next-line
+    const b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
+    /**
+     * 字符串编码成Base64, 平替浏览器的btoa, 不包含中文的处理 （适用于任何环境，包括小程序）
+     * @param {string} string
+     * @returns {string}
+     */
+    function weBtoa(string) {
+        // 同window.btoa: 字符串编码成Base64
+        string = String(string);
+        let bitmap, a, b, c, result = '', i = 0;
+        const strLen = string.length;
+        const rest = strLen % 3;
+        for (; i < strLen;) {
+            if ((a = string.charCodeAt(i++)) > 255 || (b = string.charCodeAt(i++)) > 255 || (c = string.charCodeAt(i++)) > 255)
+                throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
+            bitmap = (a << 16) | (b << 8) | c;
+            result +=
+                b64.charAt((bitmap >> 18) & 63) +
+                    b64.charAt((bitmap >> 12) & 63) +
+                    b64.charAt((bitmap >> 6) & 63) +
+                    b64.charAt(bitmap & 63);
+        }
+        return rest ? result.slice(0, rest - 3) + '==='.substring(rest) : result;
+    }
+    /**
+     * Base64解码为原始字符串，平替浏览器的atob, 不包含中文的处理（适用于任何环境，包括小程序）
+     * @param {string} string
+     * @returns {string}
+     */
+    function weAtob(string) {
+        // 同window.atob: Base64解码为原始字符串
+        string = String(string).replace(/[\t\n\f\r ]+/g, '');
+        if (!b64re.test(string))
+            throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
+        string += '=='.slice(2 - (string.length & 3));
+        let bitmap, result = '', r1, r2, i = 0;
+        for (const strLen = string.length; i < strLen;) {
+            bitmap =
+                (b64.indexOf(string.charAt(i++)) << 18) |
+                    (b64.indexOf(string.charAt(i++)) << 12) |
+                    ((r1 = b64.indexOf(string.charAt(i++))) << 6) |
+                    (r2 = b64.indexOf(string.charAt(i++)));
+            result +=
+                r1 === 64
+                    ? String.fromCharCode((bitmap >> 16) & 255)
+                    : r2 === 64
+                        ? String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255)
+                        : String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255, bitmap & 255);
+        }
+        return result;
+    }
+    // function b64DecodeUnicode(str) {
+    //   return decodeURIComponent(
+    //     exports.weAtob(str).replace(/(.)/g, function (p) {
+    //       let code = p.charCodeAt(0).toString(16).toUpperCase();
+    //       if (code.length < 2) {
+    //         code = '0' + code;
+    //       }
+    //       return '%' + code;
+    //     })
+    //   );
+    // }
+    // function base64_url_decode(str) {
+    //   let output = str.replace(/-/g, '+').replace(/_/g, '/');
+    //   switch (output.length % 4) {
+    //     case 0:
+    //       break;
+    //     case 2:
+    //       output += '==';
+    //       break;
+    //     case 3:
+    //       output += '=';
+    //       break;
+    //     default:
+    //       throw new Error('Illegal base64url string!');
+    //   }
+    //   try {
+    //     return b64DecodeUnicode(output);
+    //   } catch (err) {
+    //     return exports.weAtob(output);
+    //   }
+    // }
+    // export function weAppJwtDecode(token, options) {
+    //   if (typeof token !== 'string') {
+    //     throw new Error('Invalid token specified');
+    //   }
+    //   options = options || {};
+    //   const pos = options.header === true ? 0 : 1;
+    //   try {
+    //     return JSON.parse(base64_url_decode(token.split('.')[pos]));
+    //   } catch (e) {
+    //     throw new Error('Invalid token specified: ' + (e as Error).message);
+    //   }
+    // }
+
     function stringToUint8Array(str) {
         const utf8 = encodeURIComponent(str); // 将字符串转换为 UTF-8 编码
         const uint8Array = new Uint8Array(utf8.length); // 创建 Uint8Array

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sculp-js",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "packageManager": "npm@8.19.2",
   "description": "js utils library, includes function library、class library",
   "scripts": {