如何改进 .png 到 .jpeg 的转换答案

【问题标题】：how to improve .png to .jpeg conversion如何改进 .png 到 .jpeg 的转换
【发布时间】：2019-11-28 04:52:48
【问题描述】：

我正在使用以下代码将 .png 数据 URL 转换为更小的 .jpeg 数据 URL。这里每个 .png 数据 URL 大小为 40mb 或更大，所以我下面的代码花费了太多时间来创建更小的 sizejpeg。有没有办法让它更快？

    <!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需要太多时间

【问题讨论】：

通过 JavaScript 在浏览器中转换 40MB PNG 文件似乎是一种奇怪的技术选择。

标签： javascript html canvas jpeg data-uri

【解决方案1】：

HTML5 Canvas 在这里不是首选，因为它在处理较大的文件时效率低下。您可以使用 sharp 库来实现与 Javascript（Node.js 后端）相同的功能。

sharp
- 高性能 Node.js 图像处理
- 调整 JPEG、PNG、WebP 和 TIFF 图像大小的最快模块
- 使用 libvips 库

阅读文档https://sharp.readthedocs.io/en/v0.17.0/install/

Pros and Cons of HTML5 Canvas

【讨论】：