使用 HTML Canvas + Javascript 优化图像 + 减小文件大小

Question

我正在制作一个 Chrome 扩展程序，它会自动截取可见选项卡的屏幕截图并将 JPG 下载到您的文件系统。一切正常，但图像非常大（1280x720px 图像约 400kb），我想优化它们（理想情况下约为 40kb）。

这是我使用的代码：

var image = new Image();
    image.onload = function() {
        var canvas = screenshot.content;
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);

        // save the image
        var link = document.createElement('a');
        link.download = shotname + ".jpg";
        link.href = screenshot.content.toDataURL();
        link.click();
        screenshot.data = '';
    };
    image.src = screenshot.data;

如何优化图像以降低质量和文件大小？我想尝试不同的质量选项，以便了解可接受的用例是什么。

Answer 1

您可以将 url 编码为 jpg 格式。

第二个参数指定生成的 jpg 的质量。

link.href = screenshot.content.toDataURL('image/jpeg', 0.6);

Answer 2

您可以使用 JPEG 和这样的质量设置：

link.href = screenshot.content.toDataURL("image/jpeg", 0.3);

质量在 [0, 1] 范围内。如果不指定任何图片类型，默认为PNG，很多情况下比较大。

请注意，使用 JPEG 时会丢失 alpha 通道。

此外，您可以稍微模糊图像（参见 f.ex。我的 realtime-blur or stack-box blur）。模糊过滤一些难以压缩的高频。

使用 HTML Canvas + Javascript 优化图像 + 减小文件大小

Using HTML Canvas + Javascript to optimize and image + reduce filesize

html

javascript

canvas

image

html5-canvas