Canvas - HTML5 - page 173

Zusätzlich muss noch die Skalierung der Bildbreite um 0.9 durch Verschiebung
um 320*0.1 nach rechts ausgeglichen werden.
context.setTransform(1,0,0,1,60,160);
context.transform(1,Math.tan(-0.175),0,1,0,0);
context.translate(320*0.1,Math.tan(0.175)*320);
context.scale(0.9,1);
context.drawImage(icons[0],0,0,320,320);
context.drawImage(effects[0],0,320,320,160);
Damit wäre unser bisher schwierigstes Canvas-Beispiel geschafft - das Er-
gebnis kann sich sehen lassen und verlangt geradezu danach, im JPEG- oder
PNG-Format gespeichert zu werden. Firefox kommt uns da im Gegensatz zu
den anderen Browsern entgegen - klicken Sie mit der rechten Maustaste auf
den Canvas, und schon können Sie unsere Komposition speichern. Wählen Sie
B ILD A NZEIGEN aus, erscheint eine seltsam anmutende, sehr, sehr, sehr lange
Adresse im URL-Feld, die mit data:image/png;base64,... beginnt und uns direkt
zum nächsten Abschnitt bringt - canvas.toDataURL() .
5.12 Base64-Kodieren mit »canvas.toDataURL()«
Base64 beschreibt ein Verfahren zur Kodierung von Binärdaten als ASCII-Zei-
chenfolgen und wird in Canvas dazu verwendet, um aus dem Canvas-Inhalt, der
ja eigentlich nur als Raster im Speicher existiert, eine weiter verarbeitbare, so-
genannte data: URL zu erzeugen. Die Methode dazu lautet dementsprechend:
canvas.toDataURL(type, args)
Als type übergeben wir den MIME-Type des gewünschten Output-Formats und
verwenden dazu entweder image/png oder image/jpeg . Ersteres steht für das
Default-Format beim Kodieren und kommt auch dann zum Einsatz, wenn wir
type weglassen oder ein Format spezifizieren, mit dem der Browser nichts an-
fangen kann. Im optionalen Argument args finden gegebenenfalls zusätzliche
Parameter Platz - so zum Beispiel die Bildqualität bei der Wahl von image/jpeg
mit gültigen Zahlenwerten von 0.0 bis 1.0 .
Das Ergebnis von toDataURL() ist ein Base64-kodierter String, der im Fall des
2 x 2 Pixel großen Canvas in den benannten Farben navy , teal , lime und yellow
aus Abbildung 5.27 so aussieht:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAIAAAACCAYAAABytg0kAAAAF0lEQVQImQXBAQEAAA
CCIKb33ADLFql0PuYIemXXHEQAAAAASUVORK5CYII=