Leinwand und Bild konvertieren sich gegenseitig Beispielcode

Kommentar: Dieser Artikel zeigt Ihnen, wie Sie Bild in Canvas konvertieren und wie Sie ein Bild extrahieren. Der Beispielcode ist wie folgt. Freunde mit diesem Bedürfnis können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Originaldemo: JavaScript Canvas Bildkonvertierung Demo

Auf der Mozilla Web Development Conference in der letzten Woche verbrachten wir den größten Teil des Tages damit, zukünftige Anwendungen für den Mozilla -Markt zu diskutieren. Instagram ist die beliebteste mobile App in letzter Zeit und verkauft an Facebook zu einem himmelhohen Preis von 1 Milliarde US-Dollar.

Es macht mir nichts aus, zusätzliches Geld zu verdienen, also habe ich beschlossen, eine App im Instagram-Stil zu erstellen (werde sie später teilen).

Dieser Artikel zeigt, wie Sie Bild in Leinwand umwandeln und ein Bild extrahieren.

Bild in Leinwand konvertieren

Um ein Bild in Canvas (altafel, Canvas) umzuwandeln, können Sie die Drawimage -Methode des Canvas -Elementkontexts verwenden:

// Bild in das Canvas -Objekt konvertieren

Funktion ConvertImagetocanvas (Bild) {

// Erstellen Sie ein Canvas -Dom -Element und setzen Sie seine Breite und Höhe wie das Bild

var canvas = document.createelement ("canvas");

canvas.width = image.width;

Canvas.Height = Image.Height;

// Koordinaten (0,0) geben die Zeichnung von hier an, die dem Versatz entspricht.

canvas.getContext ("2d"). DrawImage (Bild, 0, 0);

Leinwand zurückgeben;

}

Konvertieren Sie Leinwand in Bild

Unter der Annahme, dass das Bild auf Canvas verarbeitet wurde, können Sie die folgende Methode verwenden, um Leinwand in ein Bildbildobjekt umzuwandeln.

// Bild aus Leinwand extrahieren

Funktion ConvertCanvastoimage (Canvas) {

// Das neue Bildobjekt kann als DOM verstanden werden

var image = new Image ();

// canvas.todataurl gibt eine Reihe von base64 codierten URLs zurück. Natürlich muss der Browser selbst es unterstützen.

// Geben Sie das Format PNG an

Image.src = canvas.todataurl ("Bild/png");

Return Image;

}

! Die Konvertierung von Bildbildern und Leinwand ist einfacher als Sie denken. In Zukunft werde ich Ihnen verschiedene Bildverarbeitungstechnologien demonstrieren. Ich glaube, dass Sie in Zukunft auf jeden Fall viel Geld mit diesen Technologien verdienen werden.