如何改进 .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