So fügen Sie Bilder in HTML5 Canvas ein und speichern sie als Bilder_HTML5-Tutorial-Tipps

Verwenden Sie JavaScript, um das Bild in die Leinwand zu kopieren

Um das Bild in die Leinwand einzufügen, verwenden wir die Methode drawImage des Canvas-Elements:

Code kopieren

Code wie folgt:

// Konvertiert das Bild in eine Leinwand; gibt ein neues Leinwandelement zurück
Funktion „convertImageToCanvas(image)“ {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);

Return Canvas;
}

Der Parameter 0, 0 ist hier der Koordinatenpunkt auf der Leinwand, und das Bild wird an diese Stelle kopiert.

Verwenden Sie JavaScript, um die Leinwand im Bildformat zu speichern

Wenn Ihre Arbeit an der Leinwand abgeschlossen ist, können Sie die Leinwanddaten mit der folgenden einfachen Methode in das Bildformat konvertieren:

Code kopieren

Der Code lautet wie folgt:

// Konvertiert Canvas in ein Bild
Funktion ConvertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
Bild zurückgeben;
}

Dieser Code kann Leinwand auf magische Weise in das PNG-Format konvertieren!

Diese Techniken zum Konvertieren zwischen Bildern und Leinwänden sind möglicherweise einfacher als Sie denken.