Canvas toDataUrl会增加图片的文件大小 [英] Canvas toDataUrl increases file size of image

问题描述

当使用toDataUrl（）设置图像标记的源时，我发现保存时的图像比原始图像大很多。

When using toDataUrl() to set the source of an image tag I am finding that the image when saved is a great deal larger than the original image.

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

In the example below I am not specifying a second param for the toDataUrl function so the default quality is being used. This is resulting in an image much larger that the original image size. When specifying 1 for full quality the image generated is even larger.

有人知道为什么会发生这种情况或如何阻止它？

Does anybody know why this is happening or how I can stop it?

            // 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图像之一。

Here is an example, unfortunately the image cannot be cross domain and so I am having to just pull one of the jsfiddle images.

<一个href =http://jsfiddle.net/ptSUd/> http://jsfiddle.net/ptSUd/

图片是7.4kb，如果你然后保存正在输出的图像，你会看到它是10kb。使用更详细的图像，差异更明显。如果您在toDataUrl质量设置为1，图像然后17KB。

The image is 7.4kb, if you then save the image which is being output you will see that it is 10kb. The difference is more noticeable with more detailed images. If you set the toDataUrl quality to 1, the image is then 17kb.

我也使用的是Firefox 10本，使用Chrome时的图像尺寸仍然较大，但不之多。

I am also using FireFox 10 for this, when using Chrome the image sizes are still larger but not by as much.

推荐答案

通过返回的字符串 toDataURL（）方法不表示原始数据。

The string returned by the toDataURL() method does not represent the original data.

我刚刚执行了一些广泛的测试，显示创建的数据URL取决于浏览器（ not < 。EM>的操作系统）

I have just performed some extensive tests, which showed that the created data-URL depends on the browser (not on the operating system).

 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也不同：

The method of getting the data-URI does not matter, the following snippet was used to verify that the data-URI from a file upload are also different:

<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 toDataUrl会增加图片的文件大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！