HTML5 - toDataURL() reduziert Grafikgröße; Warum?

[Okyo]

Hi,

wenn ich eine JPEG-Grafik auf dem Canvas-Tag platziere bzw. lade und es anschließend mit der toDataURL()-Methode in Base64 codiere um die Grafik speicherbar zu machen, wird die Dateigröße um 50% reduziert! Dies betrifft jedoch nur dei JPEG-Datein. PNG, GIF werden fast verdoppelt!
Das Canvas-Tag hat die selbe Größe wie die Grafikdatei! Ich dachte immer das data:URL-Schema erhöht die Dateigröße! Hier anscheinend nicht!?

Hier der relevante Code-Ausschnitt:

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');
}
img.src = "http://www.roomeffect.de/pageslices/RSB.jpg";

wäre sehr dankbar für Hilfe!
okyo

 

[kkapsner]

Dass verschiedene Bildformate für das "gleiche" Bild verschiedene Größen haben, ist nicht wirklich verwunderlich: sie verwenden auch unterschiedliche Komprimierungsalgorithmen.
JPEG-Dateien sind auch nicht immer gleich groß, da verschiedene Komprimierungsstärken verwendet werden können. Auch zusätzliche Dateiinformationen (Vorschaubild, Kameramodel, etc.) können ein Bild größer machen, ohne dass sich das Bild irgendwie verändert.

 

[Okyo]

Hallo, zunächst mal Danke für die Info, aber ich kann nicht ganz folgen!

Die JPEG-Grafik wird nur dann von der Größe her reduziert, wenn ich Sie auf dem Canvas platziere mit drawImage() und das Canvas-Ergebnis anschließend mit der toDataURL()-Methode speichere (Konvertiere ich die JPEG-Datei per hand in Base64, vermehrfacht sich die Dateigröße, so wie es sein soll)! Das heisst, es muss irgendeinen Zusammenhang mit dem Canvas-Element geben. Das Data:URL-Schema sollte aber niemals Dateien um 50% reduzieren! Da die Base64-Zeichenkette immer länger ist als die Bits/Bytes-Anzahl. Also muss ein Kompressionsvorgang während der Canvas-Interpretation oder bei der toDataURL()-Codierung vorsichgehen. Und merkwürdigerweise läuft das nur bei JPEG so ab! Bin jetzt auch nicht so der Bild-Dateien-Experte. Trotzdem 1000 Dank für die Hilfe!
gruß okyo

 

[kkapsner]

JPEG hat verschiedene Kompressionsstärken - die Exportfunktion des <canvas> wird hald einfach eine stärker Kompression verwenden, als du bei deinem Originalbild hast.

 

[Okyo]

kann ich diese deaktivieren?

 

[kkapsner]

Ja - indem du nicht JPEG verwendest