Wie kann ich eine HTML-Leinwand erfassen und als Bild (PNG, JPG, GIF) oder PDF speichern?

Erfassen eines HTML-Canvas als Bild oder PDF

Frage:

Können Sie erfassen? den Inhalt auf einer HTML-Leinwand anzeigen und als Bild (GIF, JPG, PNG) oder PDF exportieren? Wie kann ich konkret ein PNG-Bild aus einer Canvas-Grafik generieren?

Antwort:

Ja, es ist möglich, den Inhalt einer HTML-Canvas zu erfassen und zu exportieren als Bild oder PDF. So generieren Sie ein PNG-Bild aus einer Leinwand:

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

Dadurch wird eine Zeichenfolge erstellt, die die PNG-Daten enthält. Sie können diese Daten dann verwenden, um ein neues Bildelement zu erstellen oder es in eine Datei zu schreiben.

Erstellen eines neuen Bildelements

Um ein neues Bildelement zu erstellen und Um das PNG-Bild anzuzeigen, verwenden Sie den folgenden Code:

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

Dadurch wird das src-Attribut des Bildelements mit der ID „existing-image-id“ auf gesetzt die PNG-Daten, wodurch der Leinwandinhalt effektiv als Bild angezeigt wird.

Schreiben in eine Datei

Um die PNG-Daten in eine Datei zu schreiben, verwenden Sie den folgenden Code:

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

Dadurch werden die Bilddaten direkt in das HTML-Dokument geschrieben. Anschließend können Sie das Dokument als Datei mit der gewünschten Erweiterung (z. B. .png) speichern, um den Canvas-Inhalt als Bild zu speichern.

Das obige ist der detaillierte Inhalt vonWie kann ich eine HTML-Leinwand erfassen und als Bild (PNG, JPG, GIF) oder PDF speichern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!