Wie speichere ich Canvas in HTML5? HTML5-Methode zum Speichern der Leinwand

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man die Leinwand in HTML5 speichert. Die HTML5-Canvas-Speichermethode hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Endlich habe ich eine coole Grafik auf die Leinwand gezeichnet, ich sollte sie speichern. Aber leider sind diese Grafiken auf der Leinwand selbst keine echten Bilder und können nicht direkt gespeichert werden. Glücklicherweise bietet die Canvas-API die Methode toDataURL(), mit der Grafiken im Canvas in Bilder umgewandelt werden können.

Standardmäßig konvertiert die toDataURL()-Methode die Grafik in ein PNG im Base64-Kodierungsformat und gibt dann die Daten-URL-Daten zurück. Sie können MIME-Typparameter an toDataURL() übergeben, um die Leinwand in Bilder in anderen Formaten zu konvertieren.

Sobald Sie die Daten-URL haben, können Sie die Daten direkt in das -Element eingeben oder sie direkt aus dem Browser herunterladen. Hier ist ein Beispiel, um zu veranschaulichen, wie Sie mit der toDataURL()-Methode die gesamte Leinwand als Bild speichern.

HTML-Code lautet wie folgt:

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

Javascript-Code lautet wie folgt:

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

Wenn der Benutzer im obigen Code auf die Schaltfläche „Als PNG-Bild anzeigen“ klickt oder „Als JPG-Bild anzeigen“ wird die toDataURL()-Methode aufgerufen, um Bilder aus dem Inhalt der Leinwand zu generieren und sie in das img-Tag einzufügen, damit Benutzer sie herunterladen können.

1. Die toDataURL()-Methode ist eine Methode des Canvas-Elements selbst, keine Methode des Canvas-Kontextobjekts.

2. Das Standardformat zum Speichern von Bildern mit der toDataURL()-Methode ist „image/png“, und der Browser unterstützt andere Formate nicht sehr gut. Beispielsweise unterstützt die Google Chrome-Browserversion 41.0.2272.118 auch das Format „image/jpeg“, nicht jedoch das Format „image/gif“.

2. Moderne Browser unterstützen bereits das Klicken mit der rechten Maustaste auf die Leinwand, um die Leinwand als Bild zu speichern, sie wird jedoch im Standardformat „Bild/PNG“ gespeichert. Natürlich können Sie die toDataURL()-Methode programmgesteuert aufrufen, MIME-Typparameter übergeben und sie in anderen Formaten speichern.

Wie speichere ich die Leinwand in HTML5? Eine vollständige Einführung in die HTML5-Canvas-Speichermethode. Wenn Sie mehr über das Html5-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie speichere ich Canvas in HTML5? HTML5-Methode zum Speichern der Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!