1

simple-demo/webp.html

@@ -68,6 +68,38 @@
         });
     }
 
+    function compressImageToSize(blobFile, targetSize = 300 * 1024, maxIterations = 5, minQuality = 0.01) {
+        let currentQuality = 0.8; // 初始压缩质量
+        let iteration = 0; // 当前迭代次数
+
+        function attemptCompression() {
+            return new Promise((resolve, reject) => {
+                // 递归调用compressImage函数进行压缩
+                compressImage(blobFile, currentQuality).then(compressedBlob => {
+                    // 检查压缩后的文件大小是否满足条件
+                    if (compressedBlob.size <= targetSize) {
+                        // 如果压缩后的文件大小小于或等于目标大小，则解决Promise
+                        resolve(compressedBlob);
+                    } else if (iteration < maxIterations && currentQuality > minQuality) {
+                        // 如果还未达到最大迭代次数且质量还可以降低，则递减质量并再次尝试压缩
+                        currentQuality *= 0.8; // 每次迭代降低质量的百分比
+                        blobFile = compressedBlob; // 使用上一次压缩的结果作为下一次的输入
+                        iteration++; // 增加迭代次数
+                        attemptCompression().then(resolve).catch(reject);
+                    } else {
+                        // 如果已经达到最大迭代次数或者质量已经很低，拒绝Promise
+                        reject(new Error("Unable to compress the image to the target size."));
+                    }
+                }).catch(reject);
+            });
+        }
+
+        // 启动压缩过程
+        return new Promise((resolve, reject) => {
+            attemptCompression().then(resolve).catch(reject);
+        });
+    }
+
     // 处理粘贴板或拖拽项
     function handleClipboardItems(items) {
         if (!items) {
@@ -86,30 +118,21 @@
                 document.getElementById("preSize").innerText = formatSize(blobFile.size);
 
                 // 压缩为webp格式
-                compressImage(blobFile).then((webpBlob) => {
-                    let size = webpBlob.size;
-                    // 如果图片大于300kb，再次压缩
-                    if (size > 300 * 1024) {
-                        compressImage(webpBlob, 0.5).then((webpBlob2) => {
-                            size = webpBlob2.size;
-                            // 将压缩后的webp图片展示在页面上
-                            imageDisplay.src = URL.createObjectURL(webpBlob2);
-                            showSize(webpBlob2);
-                        });
-                        return;
-                    }
+                compressImageToSize(blobFile).then(webpBlob => {
                     // 将压缩后的webp图片展示在页面上
                     imageDisplay.src = URL.createObjectURL(webpBlob);
                     showSize(webpBlob);
                 });
 
+
                 // 防止页面跳转
                 event.preventDefault();
                 break
             }
         }
     }
-    function showSize(webpBlob){
+
+    function showSize(webpBlob) {
         document.getElementById("status").innerText = " 已压缩 ☺";
         document.getElementById("afterSize").innerText = formatSize(webpBlob.size);
     }