关于javascript：Canvas toDataUrl增加图片的文件大小

Canvas toDataUrl increases file size of image

当使用toDataUrl()设置图像标签的来源时，我发现保存时的图像比原始图像大很多。

在下面的示例中，我没有为toDataUrl函数指定第二个参数，因此使用的是默认质量。这导致图像比原始图像大得多。为全画质指定1时，生成的图像更大。

有人知道为什么会这样或我如何阻止它吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// create image
var image = document.createElement('img');

// set src using remote image location
image.src = 'test.jpg';

// wait til it has loaded
image.onload = function (){

// set up variables
var fWidth = image.width;
var fHeight = image.height;

// create canvas
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = fWidth;
canvas.height = fHeight;
var context = canvas.getContext('2d');

// draw image to canvas
context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);

// get data url
dataUrl = canvas.toDataURL('image/jpeg');

// this image when saved is much larger than the image loaded in
document.write('<img src="' + dataUrl + '" />');

}

谢谢：D

这是一个示例，不幸的是该图像不能跨域，因此我只需要拉一张jsfiddle图像。

http://jsfiddle.net/ptSUd/

该图像为7.4kb，如果您随后保存正在输出的图像，则将看到它为10kb。使用更详细的图像，区别更加明显。如果将toDataUrl质量设置为1，则图像为17kb。

我也为此使用了FireFox 10，当使用Chrome时，图像尺寸仍然更大，但没有那么大。

相关讨论

toDataURL()方法返回的字符串不代表原始数据。

我刚刚进行了一些广泛的测试，这些测试表明所创建的data-URL取决于浏览器(而不取决于操作系统)。

1
2
3
4
5

Environment - md5 sum - file size
Original file - c9eaf8f2aeb1b383ff2f1c68c0ae1085 - 4776 bytes
WinXP Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Firefox 10.0.2 - 4f184006e00a44f6f2dae7ba3982895e - 3909 bytes

获取data-URI的方法无关紧要，以下代码段用于验证来自文件上传的data-URI也不同：

测试案例：http：//jsfiddle.net/Fkykx/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<input type="file" id="file">
document.getElementById('file').onchange=function() {
var filereader = new FileReader();
filereader.onload = function(event) {
var img = new Image();
img.onload = function() {
var c = document.createElement('canvas'); // Create canvas
c.width = img.width;
c.height = img.height; c.getContext('2d').drawImage(img,0,0,img.width,img.height);
var toAppend = new Image;
toAppend.title = 'Imported via upload, drawn in a canvas';
toAppend.src = c.toDataURL('image/png');
document.body.appendChild(toAppend);
}
img.src = event.target.result; // Set src from upload, original byte sequence
img.title = 'Imported via file upload';
document.body.appendChild(img);
};
filereader.readAsDataURL(this.files[0]);
}