18

当使用 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 时，图像尺寸仍然更大，但没有那么多。

4

3 回答 3

13

该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

获取 data-URI 的方法无关紧要，以下代码段用于验证文件上传的 data-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>
于 2012-03-19T20:02:35.923 回答
5

图像的大小主要取决于浏览器内置编码器的质量。它与原始图像的大小关系不大。一旦你在你所有的像素上绘制任何东西canvas，你就不再拥有原始图像。 toDataURL不会神奇地重建画在canvas. 如果您想要与原始图像大小相同的文件：使用原始图像。

于 2012-03-19T18:04:45.220 回答
2

看起来 kirilloid 和 Rob 搞定了。我也有这个问题，它似乎是一个组合：

  • dataURL 使用 base64 编码，使其大约大 1.37 X
  • 每个浏览器对 toDataURL 函数的处理方式不同

base64 编码图像大小

我在 win8.1 firefox 和 chrome 中测试了我的缩略图生成器，并得到了 dataURL 字符串大小：

  • 火狐 = 3.72kB
  • 铬 = 3.24kB

转换为 dataURL 时，我的原始图像从 32kB 变为 45kB。

我认为base64部分是更大的因素，所以我想我现在的计划是将dataURL转换回二进制字节数组，然后再将其存储在服务器上（可能在客户端，因为我的服务器很懒）。

于 2015-02-03T11:59:29.223 回答