При использовании 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,4 КБ. Если вы сохраните изображение, которое выводится, вы увидите, что оно составляет 10 КБ. Разница более заметна с более детальными изображениями. Если вы установите для качества toDataUrl значение 1, изображение будет 17 КБ.

Я также использую FireFox 10 для этого, при использовании Chrome размеры изображений все еще больше, но не так сильно.