Canvas toDataUrl increases file size of image

Question

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.

In the example below

Answer 1

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

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

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:

Test case: 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>

Answer 2

The size of the image is determined mostly by the quality of the encoder built into the browser. It has very little to do with the size of the original image. Once you draw anything onto a canvas all you have are pixels, you no longer have the original image. toDataURL does not magically reconstitute an image that was painted onto the canvas. If you want a file with the same size as the original image: use the original image.

Answer 3

Looks like kirilloid and Rob nailed it. I had this issue too and it appears to be a combo:

• the dataURL uses base64 encoding which makes it around 1.37 X larger
• each browser processes the toDataURL function differently

base64 encoded image size

I tested my thumbnail generator in win8.1 firefox and chrome and got dataURL string sizes:

• firefox = 3.72kB
• chrome = 3.24kB

My original image when converted to dataURL went from 32kB to 45kB.

I think the base64 part is the larger factor so I guess my plan now is to convert the dataURL back to a binary byte array before I store it on the server (probably on the client side because my server's lazy).