Inhalt
- Was ist das HTML5-Canvas?
- Was ist Base64?
- So erhalten Sie Canvas-Bilddaten mit toDataURL ()
- Was können wir mit toDataURL () tun?
- So laden Sie Base64-Bilddaten auf einen HTML5-Canvas
- Fazit
Simeon Visser ist ein Schriftsteller, der gerne Themen wie Technologie und Reisen behandelt.
Für viele Webanwendungen kann es nützlich sein, das visuelle Bild auf einer HTML5-Zeichenfläche in eine base64-Darstellung davon umzuwandeln, die gesendet und freigegeben werden kann. Wie dieses Tutorial zeigt, ist das nicht sehr schwierig und es ist auch sehr einfach, ein base64-Bild auf eine HTML5-Zeichenfläche zu laden. Die Methode toDataURL () einer Zeichenfläche spielt in diesem Prozess eine wichtige Rolle, und ich zeige Ihnen, wie Sie sie verwenden.
In diesem Tutorial erfahren Sie, wie Sie ein Bild in base64 konvertieren und wie Sie von base64 in ein Bild wechseln. Ich werde auch einige mögliche Möglichkeiten diskutieren, wie diese Funktionalität in interaktiven Websites verwendet werden kann.
Wie wäre es mit einer Website, auf der Sie Ihre eigenen Bilder mit anderen teilen können? Diese Funktionalität lässt sich mit den in diesem Lernprogramm beschriebenen Techniken problemlos implementieren. Ich werde später in diesem Tutorial einige andere Beispiele geben.
Was ist das HTML5-Canvas?
Die HTML5-Zeichenfläche ist eine meiner Lieblingserweiterungen zum HTML-Webstandard. Damit können Sie JavaScript-Code schreiben, um direkt auf Ihre Webseiten zu zeichnen. Ich habe mehrere Tutorials geschrieben, in denen die Grundlagen des Zeichnens auf einer Leinwand und verschiedene Aufgaben wie das Erstellen von Text, Kreisen und Bögen erläutert werden.
- HTML5-Tutorial: Grundlagen des Leinwandzeichnens
In diesem Tutorial werde ich zeigen, wie Sie das Canvas-Element in HTML5 verwenden, um farbenfrohe Grafiken für Ihre Website zu zeichnen. Das Tutorial enthält zwei umfangreiche Beispiele, die Schritt für Schritt erklärt werden. - HTML5 Tutorial: Textzeichnung mit ausgefallenen Farben und Effekten
Sie können viel mehr als nur Text in HTML5 zeichnen! In diesem Tutorial werde ich verschiedene Effekte zeigen, um einige ausgefallene Texte zu erstellen, einschließlich Schatten, Verläufe und Rotation. - HTML5-Tutorial: Zeichnen von Kreisen und Bögen auf Leinwand
Das Zeichnen von Kreisen und Bögen in HTML5 kann eine ziemliche Herausforderung sein. In diesem Tutorial erkläre ich, wie man Kreise und Bögen zeichnet und wie die Winkel von Bögen gemessen werden. Dieses Tutorial enthält viele Beispiele.
Was ist Base64?
Base64 ist eine Möglichkeit, Daten nur mit lesbaren Zeichen wie Buchstaben, Zahlen und einigen Symbolen wie dem Pluszeichen darzustellen. Diese Daten können beliebig sein, z. B. ein Bild oder eine Datei. In der Regel handelt es sich jedoch nicht um einfachen Text (ansonsten macht es nicht viel Sinn, sie in base64 zu konvertieren).
Diese Darstellung, auch als base64-Zeichenfolge bezeichnet, ist sehr nützlich, da sie überall dort verwendet werden kann, wo auch normaler Text verwendet werden kann. Dies erleichtert das Speichern der Bilder. Sie können beispielsweise mehrere Bilder in einer Nur-Text-Datei speichern.
Die genauen Details zur Funktionsweise von base64 sind für dieses Lernprogramm nicht relevant. Alles, was zählt, ist, dass base64 eine andere Art der Darstellung derselben visuellen Bilddaten ist, jedoch in Textform. Ich werde den interessierten Leser auf den base64-Artikel auf Wikipedia verweisen, wenn Sie mehr wissen möchten.
So erhalten Sie Canvas-Bilddaten mit toDataURL ()
Die Zeichenfläche in HTML5 verfügt über eine Methode namens toDataURL (), die Sie aufrufen können, um eine HTML5-Zeichenfläche in ein PNG-Bild umzuwandeln und die Bilddaten dieser Zeichenfläche abzurufen. Standardmäßig erhalten Sie eine base64-Darstellung des Bildes im PNG-Format. Einfacher ausgedrückt erhalten Sie ein PNG-Bild, das jedoch in base64 codiert wurde. Für die toDataURL () -Methode ist das PNG-Format das einzige Bildformat, das von allen HTML5-kompatiblen Webbrowsern unterstützt wird. Einige Browser unterstützen mehrere Bildformate.
Sie können toDataURL mit einem Argument wie "image / jpeg" oder "image / png" aufrufen, wenn Sie angeben möchten, welches Bildformat Sie möchten. Wir müssen uns darüber keine Gedanken machen und können einfach toDataURL ohne Argumente aufrufen, um ein PNG-Bild in der base64-Darstellung zu erhalten. Beachten Sie, dass der HTML5-Standard nur erfordert, dass Browser PNG für toDataURL unterstützen. Verwenden Sie dieses Bildformat daher am besten, wenn Sie möchten, dass Ihr Code in allen Webbrowsern funktioniert.
Im folgenden Code haben wir eine Zeichenfläche und rufen die Methode toDataURL () auf, um die Bilddaten abzurufen.
canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); ctx.beginPath (); ctx.arc (100, 100, 50, 1,5 * Math.PI, 0,5 * Math.PI, false); ctx.lineWidth = 10; ctx.stroke (); var imgData = canvas.toDataURL (); / script> Die Variable imgData enthält jetzt eine base64-Darstellung des aktuell auf der Zeichenfläche befindlichen Bildes. Es sieht ungefähr so aus: Daten: image / png; base64, iVBORw0 ... AAAElFTkSuQmCC. Ich habe nur den Anfang und das Ende der Daten gezeigt, weil es zu viel wäre, um alles zu zeigen. Wie Sie sehen, beginnt es mit "data:", dann dem Bildtyp ("image / png"), dann der Codierung ("base64") und schließlich allen Daten des Bildes im Text. Durch einfaches Aufrufen von toDataURL () haben wir das Bild in eine Textdarstellung umgewandelt. Das ist gut so, denn Text lässt sich viel einfacher teilen oder senden. Wenn Sie diese gesamte Textdarstellung des Bildes kopieren und an eine andere Person senden, kann diese Person sie in die Adressleiste ihres Browsers einfügen und das Bild wird angezeigt.
Was können wir mit toDataURL () tun?
Was können wir mit diesen Daten machen?
- Wir könnten die base64-Zeichenfolge zur Speicherung in einer Datenbank an den Server senden. Ein Benutzer kann mit einem HTML5-Canvas-Bildeditor ein Bild erstellen und das Bild an die Website senden. Das Bild kann als base64-Zeichenfolge in der Datenbank gespeichert werden und kann problemlos geladen und wieder auf einer Zeichenfläche angezeigt werden (Informationen hierzu finden Sie weiter unten in diesem Lernprogramm). Menschen könnten auf diese Weise Kunst schaffen und teilen.
- Wir können Rückgängig / Wiederherstellen-Funktionen für einen solchen Canvas-Bildeditor erstellen. Sie können alle vom Benutzer vorgenommenen Änderungen verfolgen und jede Version des Bildes als Base64-Zeichenfolge speichern. Wenn der Benutzer einen Fehler gemacht hat und die letzte Bearbeitung rückgängig machen möchte, können Sie die neueste base64 laden und auf der Leinwand anzeigen.
- Eine Funktion "Bild per E-Mail senden". Wie Sie vielleicht wissen oder nicht wissen, wird base64 auch verwendet, wenn Sie ein Bild (oder eine beliebige Datei) an eine E-Mail anhängen. Eine Website bietet jetzt die Möglichkeit, Ihren Freunden ein Bild per E-Mail zu senden. Es empfängt einfach das Bild von Ihnen in Base64-Darstellung und erstellt dann eine E-Mail mit den enthaltenen Base64-Daten.
So laden Sie Base64-Bilddaten auf einen HTML5-Canvas
Sie möchten jetzt auch das Gegenteil tun: Wenn Sie eine base64-Darstellung eines Bildes haben, wie können wir diese base64-Bilddaten auf eine HTML5-Zeichenfläche laden? Dies ist nicht schwierig, da wir einfach ein Bild erstellen, die Daten diesem Bild zuweisen und dann das Bild zeichnen können. Hier ist der JavaScript-Code, um genau das zu tun.
var myImage = neues Bild (); myImage.src = imgData; ctx.drawImage (myImage, 0, 0);
Die Variable imgData enthält die base64-Bilddaten. Wenn die Leinwand zuvor leer war, sehen Sie jetzt unser Bild noch einmal auf der Leinwand. Danach können Sie toDataURL () erneut verwenden, um die Daten in der base64-Darstellung abzurufen.
Fazit
In diesem Tutorial haben wir gesehen, wie man das Bild, das auf einer HTML5-Zeichenfläche angezeigt wird, in eine Base64-Zeichenfolge umwandelt und umgekehrt: Wir haben gesehen, wie ein Base64-Bild auf eine HTML5-Zeichenfläche geladen wird. Was Sie mit diesen base64-Strings machen, liegt ganz bei Ihnen!
Viel Glück bei Ihren Webentwicklungsprojekten und viel Spaß beim Codieren!
Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.
