Information Technology Reference
In-Depth Information
Derart kodierte Zeichenketten können mitunter ganz schön lang werden - so
besteht die Base64-Version unserer Foto-Collage mit Spiegeleffekt aus nicht
weniger als 1.298.974 Zeichen und würde bei 50 Zeilen pro Buchseite mit je-
weils 80 Zeichen glatt 325 Seiten dieses Buches füllen.
Worin besteht nun der Nutzen von
toDataURL()
? Wieso sollten wir binäre Bild-
daten in Zeichenketten umformatieren? Die Antwort ist einfach:
toDataURL()
erlaubt es uns, den flüchtigen
In-memory
-Canvas persistent in HTML zur Ver-
fügung stellen und damit dem Benutzer oder einer Applikation zum Speichern
zugänglich zu machen.
Der erste Anwendungsfall für
todataURL()
ist das Kopieren einer Canvas-Grafik
in ein
HTMLImageElement
. Ermöglicht wird dies dadurch, dass das
src
-Attribut
auch eine
data: URI
sein darf. Der Code dazu ist kurz und benötigt neben einem
dynamisch erzeugten Canvas ein leeres Bild:
<!DOCTYPE html>
<title>Canvas auf ein Bild kopieren</title>
<img src="" alt="kopierter Canvas-Inhalt, 200x200 Pixel">
<script>
var canvas = document.createElement("CANVAS");
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');
context.fillStyle = 'navy';
context.fillRect(0,0,canvas.width,canvas.height);
document.images[0].src = canvas.toDataURL();
</script>
Die entscheidende Zeile im Listing ist fett gedruckt und zeigt, wie einfach das
Kopieren ist - Referenz auf das erste Bild im Dokument festlegen und dessen
src
-Attribut mit
canvas.toDataURL()
belegen. Als Resultat erhalten wir ein re-
guläres
img
-Element, das wir wie jedes andere Bild im Browser behandeln und
so auch als PNG speichern können.
Mit einem einfachen
onclick
-Handler auf das
canvas
-Element demonstrieren
wir den nächsten Anwendungsfall für
toDataURL()
- das direkte Zuweisen als
URL, wobei die Ausgabe diesmal nicht als PNG, sondern als JPEG erfolgt:
document.images[0].onclick = function() {
window.location = canvas.toDataURL('image/jpeg');
};
