使用 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

您可以使用 JPEG 和如下质量设置：

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

质量在 [0, 1] 范围内。如果不指定任何图像类型，则默认为 PNG，在许多情况下它相对较大。

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

此外，您可以稍微模糊图像（参见例如我的实时模糊或堆栈框模糊）。模糊过滤掉一些难以压缩的高频。