Kommentar: In diesem Artikel wird hauptsächlich die Methode vorgestellt, Bilder zu legen und sie als Bilder in HTML5 -Leinwand zu speichern. Vor allem das Speichern der Bildinhalte als Bilder, was eine sehr praktische Funktion ist. Freunde, die es brauchen, können sich darauf beziehen.
Kopieren Sie Bilder mit JavaScript in Leinwand
Um das Bild in die Leinwand zu setzen, verwenden wir die Drawimage -Methode des Canvas -Elements:
// Konvertiert das Bild in Leinwand; Gibt ein neues Canvas -Element zurück
Funktion ConvertImagetocanvas (Bild) {
var canvas = document.createelement ("canvas");
canvas.width = image.width;
Canvas.Height = Image.Height;
canvas.getContext ("2d"). DrawImage (Bild, 0, 0); </p> <p> Return Canvas;
}
Hier wird die Koordinatenpunkte auf der Parameter -Leinwand 0, 0, das Bild an diesen Ort kopiert.
Speichern Sie Canvas mit JavaScript im Bildformat
Wenn Ihre Arbeiten an der Leinwand abgeschlossen sind, können Sie die Canvas -Daten mit der folgenden einfachen Methode in das Bildformat umwandeln:
// konvertiert Leinwand in ein Bild
Funktion ConvertCanvastoimage (Canvas) {
var image = new Image ();
Image.src = canvas.todataurl ("Bild/png");
Return Image;
}
Dieser Code kann Leinwand auf magische Weise in PNG -Format umwandeln!
Diese Techniken zum Konvertieren zwischen Bildern und Leinwand sind möglicherweise viel einfacher als Sie denken.