Canvas减少了Jpeg的图像大小，但是为什么？

当我使用drawImage()以及之后使用canvas.toDataURL()将本地可保存的JPEG图像绘制到Canvas时（使用鼠标右键单击），则保存的Jpeg-Image的缩小文件大小约为40％。只有在使用Jpeg时才如此。 PNG，GIF（非压缩文件）尺寸增加。我认为，如果我将Image-File转换为Base64，则尺寸增长至约130％。所以我认为canvas-element具有自己的集成压缩功能？如果是这样，我可以停用它吗？Canvas减少了Jpeg的图像大小，但是为什么？

的代码如下所示：

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)

我不知道是什么问题？

来源

2011-12-03 Okyo

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

来源

2011-12-04 02:42:05 robertc

“...再次压缩该位图”？那么canvas是否会自行压缩该位图？ base64不是压缩算法。令我感到不安的是，大约50％的压缩率并不好。 – Okyo

@Okyo如果你在屏幕上看到一个图像，那么它目前没有被压缩。为什么50％的压缩大小不好？整个压缩点就是让事情变得更小。 – robertc

是的，这实际上是正确的，你在说什么，但我的意图只是为了了解这个问题背后的技术。无论如何thanx支持！ – Okyo

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

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

来源

2011-12-03 22:58:44 Neil

thanx快速响应，但这并不能解决问题，文件大小仍然减少！ Doenst很重要，我指定的comp-quality。 – Okyo

这应该给你最好的结果：

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

从MDN报价：

如果请求的类型是图片/ jpeg或者image/WEBP，那么第二说法，如果它介于0.0和1.0之间，被视为指示图像质量。

来源

2011-12-04 20:48:09 Pierre

Canvas减少了Jpeg的图像大小，但是为什么？

回答

相关问题