如何改進 .png 到 .jpeg 的轉換

Question

我正在使用以下代碼將 .png 數據 URL 轉換為較小的 .jpeg 數據 URL。 這里每個 .png 數據 URL 大小為 40mb 或以上，所以我下面的代碼花費了太多時間來創建較小的 jpeg。有沒有辦法讓它更快？

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>Title of the document</title>
    </head>

    <body>
        <button type="button" onclick="compress()">Try it</button>


        <script>
            function compress() {
                maxWidth = 10000;
                var source_img_obj = new Image;


source_img_obj.src = "base64pngimage dataurl"
                var mime_type = "image/jpeg",
                    output_format = "jpeg";

                maxWidth = maxWidth || 10000;
                var natW = source_img_obj.naturalWidth;
                var natH = source_img_obj.naturalHeight;
                var ratio = natH / natW;
                if (natW > maxWidth) {
                    natW = maxWidth;
                    natH = ratio * maxWidth;
                }
                var cvs = document.createElement('canvas');
                cvs.width = natW;
                cvs.height = natH;
                var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
                var newImageData = cvs.toDataURL(mime_type, 0.4);
                var result_image_obj = new Image();
                result_image_obj.src = newImageData;
                console.log(newImageData);
            }
        </script>
    </body>

    </html>

如何提高這個函數的代碼性能，.png轉.jpeg時間太長

Answer 1

HTML5 Canvas 在這里不是首選，因為它處理較大的文件效率低下。 您可以使用sharp庫來實現與Javascript（Node.js后端）相同的功能。

sharp
- 高性能 Node.js 圖像處理
- 調整 JPEG、PNG、WebP 和 TIFF 圖像大小的最快模塊
- 使用 libvips 庫

閱讀文檔https://sharp.readthedocs.io/en/v0.17.0/install/

HTML5 Canvas 的優缺點

如何改進 .png 到 .jpeg 的轉換

問題描述

1 個解決方案

解決方案1
0 2019-11-28 05:28:17

如何改進 .png 到 .jpeg 的轉換

問題描述

1 個解決方案

解決方案1 0 2019-11-28 05:28:17

解決方案1
0 2019-11-28 05:28:17