Canvas减少了Jpeg的图像大小，但是为什么？ [英] Canvas reduces imagesize of Jpeg, but why?

问题描述

当我使用 drawImage（）绘制JPEG图像到画布，然后使用 canvas.toDataURL（）使它可保存的本地（与正确的mouseclick），然后保存的Jpeg-Image有一个缩小的文件大小约40％。只有这样，当使用Jpeg。 PNG，GIF（NON-COMPRESSION-FILES）的大小越来越大。我想，如果我将一个图像文件转换为Base64的大小增长到约130％。所以我认为canvas元素有自己的集成压缩功能？如果是，我可以停用吗？

When I draw a JPEG-Image to Canvas using drawImage() and after that, using canvas.toDataURL() to make it saveable local (with right mouseclick), then the saved Jpeg-Image has a reduced filesize about 40%. It is only so, when using Jpeg. PNG, GIF (NON-COMPRESSION-FILES) rises up the size. I thought, if I convert a Image-File to Base64 the size grows up to about 130%. So I think the canvas-element has an own integrated compression-functionality? If so, can I deactivate it?

代码如下所示：

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)

知道问题是什么？

推荐答案

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

It's not a problem. JPG is a lossy format, there's no reason to expect a JPG which is expanded into a bitmap (so you can see it on the screen) to be the same size as a new JPG made from compressing that bitmap again. If you want the original file to be saved, save the original file.

这篇关于Canvas减少了Jpeg的图像大小，但是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！