Wie kann ich einen HTML-Canvas als PNG-Bild speichern?

HTML-Canvas-Ausgabe in verschiedenen Bildformaten erfassen

Frage:

Kann der Inhalt eines HTML-Canvas als erfasst oder gedruckt werden? ein Bild oder PDF? Wie kann konkret ein Bild aus einer Leinwand generiert und als PNG gespeichert werden?

Antwort:

Verwendung der erweiterten Funktionen von HTML5, Erfassen und Speichern der Leinwandausgabe als Bild ist zu einem unkomplizierten Prozess geworden:

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

Sobald die gewünschten Bilddaten in der Variable img gespeichert sind, können sie auf verschiedene Weise verwendet werden Möglichkeiten:

• Neues Bild generieren:

document.getElementById('existing-image-id').src = img;

• Direkt in HTML anzeigen:

document.write('<img src="' + img + '" />');

Mit diesem Skript können Sie Ihre Leinwandausgabe als PNG-Bild erfassen und speichern und so praktische Methoden für weitere Zwecke bereitstellen Verwendung oder Vertrieb.

Das obige ist der detaillierte Inhalt vonWie kann ich einen HTML-Canvas als PNG-Bild speichern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!