当使用toDataUrl（）设置图像标记的源时，我发现保存时的图像比原始图像大得多。
在下面的示例中，我没有为toDataUrl函数指定第二个参数，因此使用了默认质量。这导致图像比原始图像的大小大得多。当为全质量指定1时，生成的图像甚至更大。
有人知道为什么会发生这种事，或者我该如何阻止它吗？
// 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()方法返回的字符串不代表原始数据。
我刚刚进行了一些广泛的测试，结果表明创建的数据URL取决于浏览器（而不是操作系统上的）。
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
获取数据URI的方法无关紧要，以下片段用于验证文件上传的数据URI是否也不同：
测试用例：http://jsfiddle.net/Fkykx/
<input type="file" id="file"><script>
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]);
}
</script>
图像的大小主要由内置在浏览器中的编码器的质量决定。它与原始图像的大小几乎没有关系。一旦你在canvas上画了任何东西，你所有的都是像素，你就不再有原始图像了。CCD_ 3不会神奇地重建绘制在CCD_ 4上的图像。如果需要与原始图像大小相同的文件：请使用原始图像。
看起来kirilloid和Rob搞定了。我也遇到了这个问题，它似乎是一个组合：
- dataURL使用base64编码，使其大约大1.37倍
- 每个浏览器对toDataURL函数的处理方式不同
base64编码图像大小
我在win8.1 firefox和chrome中测试了我的缩略图生成器，得到了dataURL字符串大小：
- firefox=3.72kB
- 铬=3.24kB
当转换为dataURL时，我的原始图像从32kB变为45kB。
我认为base64部分是更大的因素，所以我想我现在的计划是在将数据URL存储在服务器上之前将其转换回二进制字节数组（可能是在客户端，因为我的服务器很懒）。