Canvas уменьшает размер изображения Jpeg, но почему?

Question

Когда я рисую JPEG-изображение в Canvas, используя drawImage(), а затем, используя canvas.toDataURL(), чтобы сделать его сохраняемым локально (с помощью щелчка правой кнопкой мыши), то сохраненный Jpeg-Image имеет уменьшенный размер файла около 40%.Это только так, при использовании Jpeg.PNG, GIF (несжатие файлов) увеличивается в размере.Я думал, что если я преобразую Image-File в Base64, его размер возрастет примерно до 130%.Так что я думаю, что элемент canvas имеет собственную встроенную функцию сжатия?Если так, я могу деактивировать это?

Код выглядит так:

var img = new Image();

img.onload = function () 
{
var width = img.width;
var height = img.height;
context.drawImage(img, 0, 0,width,height);
document.images[0].src = canvas.toDataURL('image/jpeg');//<-size = 30,2 KB (30.990 Bytes)
}
img.src = "http://www.roomeffect.de/pageslices/RSB.jpg"; //<-original file size = 58,5 KB (59.930 Bytes)

Я не знаю, в чем проблема?

Answer 1

Вы можете указать качество JPEG в качестве второго параметра функции toDataURL.Качество по умолчанию в Firefox составляет 0,92 (92%).

https://developer.mozilla.org/en/DOM/HTMLCanvasElement

Answer 2

Это должно дать вам лучшие результаты:

document.images[0].src = canvas.toDataURL('image/jpeg', 1);

Цитируется по MDN:

Если запрошенным типом является image / jpeg или image / webp, то второй аргумент, если он находится между 0,0 и 1,0, рассматривается как указывающее изображение качество.

Answer 3

Это не проблема.JPG - это формат с потерями, нет никаких оснований ожидать, что JPG, развернутый в растровое изображение (чтобы вы могли видеть его на экране), будет того же размера, что и новый JPG, созданный после сжатия этого растрового изображения снова.Если вы хотите сохранить исходный файл, сохраните исходный файл.