Question

当我使用drawImage()将JPEG图像绘制到画布上之后，使用canvas.toDataURL()使其可以保存为本地（使用鼠标右键单击），然后保存的Jpeg-Image的文件大小减少了40％。只有这样，使用Jpeg时。 PNG，GIF（非压缩文件）的大小越来越大。我想，如果我将图像文件转换为Base64，那么它的大小会增加到大约130％。所以我认为canvas-element有自己的集成压缩功能？如果是这样，我可以停用吗？

守则如下：

var img = new Image();

img.onload = function () 
{
var width = img.width;
var height = img.height;
context.drawImage(img, 0, 0,width,height);
document.images[0].src = canvas.toDataURL('image/jpeg');//<-size = 30,2 KB (30.990 Bytes)
}
img.src = "http://www.roomeffect.de/pageslices/RSB.jpg"; //<-original file size = 58,5 KB (59.930 Bytes)

我不知道问题是什么？

Answer 1

您可以将JPEG质量指定为toDataURL函数的第二个参数。 Firefox中的默认质量为0.92（92％）。

https://developer.mozilla.org/en/DOM/HTMLCanvasElement

Answer 2

这不是问题。 JPG是一种有损格式，没有理由期望将JPG扩展为位图（因此您可以在屏幕上看到它）与通过再次压缩该位图而制作的新JPG的大小相同。如果要保存原始文件，请保存原始文件。

Answer 3

这应该会给你最好的结果：

document.images[0].src = canvas.toDataURL('image/jpeg', 1);

引自MDN：

如果请求的类型是image / jpeg或image / webp，那么第二个如果参数介于0.0和1.0之间，则将其视为指示图像质量。

Canvas减少了Jpeg的图像化，但为什么呢？

3 个答案: