Canvas toDataUrl увеличивает размер файла изображения.

При использовании 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('');

            }

Спасибо :D

Вот пример, к сожалению, изображение не может быть междоменным, поэтому мне нужно просто вытащить одно из изображений jsfiddle.

http://jsfiddle.net/ptSUd/

Изображение имеет размер 7,4 КБ, если вы затем сохраните изображение, которое выводится, вы увидите, что оно составляет 10 КБ. Разница более заметна на более детализированных изображениях. Если вы установите качество toDataUrl равным 1, размер изображения составит 17 КБ.

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

17
задан Lishamatish 19 March 2012 в 17:46
поделиться