新增自定义选择

test/index.html

@@ -9,7 +9,17 @@
     <img id="webpImage" alt="WebP Image">
     <br>
     <br>
-    <!-- <button onclick="clickIt()">strat4次</button> -->
+    <input type="file" id="imageUpload" accept="image/*" onchange="handleFileUpload(event)">
+    <br>
+    <label for="width">宽度:</label>
+    <input type="number" id="width" value="0">
+    <br>
+    <label for="height">高度:</label>
+    <input type="number" id="height" value="0">
+    <br>
+    <label for="quality">质量:</label>
+    <input type="number" id="quality" value="50" min="0" max="100">
+    <br>
     <div id="result"></div>
 </body>
 
@@ -67,8 +77,29 @@
         })
     }
 
+    function handleFileUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const buffer = base64ToArrayBuffer(e.target.result.split(",")[1]);
+                const targetWidth = document.getElementById("width").value;
+                const targetHeight = document.getElementById("height").value;
+                const qualityFactor = document.getElementById("quality").value;
+                decodeToWebpp(buffer,targetWidth,targetHeight,qualityFactor);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
 
-    function decodeToWebpp(buffer) {
+    /**
+     * 将图片转换为 WebP 格式
+     * @param {ArrayBuffer} buffer - 图片的二进制数据
+     * @param {number} targetWidth - 目标宽度
+     * @param {number} targetHeight - 目标高度
+     * @param {number} qualityFactor - 压缩质量 (0 - 100)
+     */
+    function decodeToWebpp(buffer,targetWidth=0,targetHeight=0,qualityFactor=50) {
         // 显示原始图片大小
         let size = (buffer.byteLength / 1024).toFixed(2);
 
@@ -79,9 +110,6 @@
         var outputSizePtr = Module._malloc(4); // 存储输出大小的指针
 
         // 设置目标宽高和质量因子
-        var targetWidth = 300;  // 目标宽度
-        var targetHeight = 300; // 目标高度
-        var qualityFactor = 50 // 压缩质量 (0 - 100)
         var inputDataPtr = Module._malloc(inputData.length);
         Module.HEAPU8.set(inputData, inputDataPtr);
         var webpPtr = Module._convert_image_to_webp(inputDataPtr, inputData.length, targetWidth, targetHeight, qualityFactor, outputSizePtr);