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/