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