Ausführliche Erklärung, wie man Canvas-Inhalte mit JavaScript in Bilder umwandelt

Wir haben letzte Woche einen halben Tag damit verbracht, die nächste App zu entwickeln, die in den Mozilla Marketplace aufgenommen werden soll. Es gibt eine Anwendung, die derzeit sehr beliebt ist: Facebook hat 1 Million US-Dollar ausgegeben, um sie zu erwerben. Wir wollten auch 1 Million US-Dollar in die Tasche stecken, und ich habe beschlossen, eine Anwendung im Instagram-Stil zu entwickeln. In diesem Artikel werde ich vorstellen, wie man ein Bild in die Leinwand kopiert und wie man den Leinwandinhalt als Bild speichert .Format.

Sehen Sie sich die Demo an

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

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

// Converts image to canvas; returns new canvas element
function 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 0, 0-Parameter hier ist der Koordinatenpunkt auf der Leinwand, und das Bild wird an diese Stelle kopiert.

Verwenden Sie JavaScript, um die Leinwand im Bildformat zu halten

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

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

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

Sehen Sie sich die Demo an

Diese Techniken zum Konvertieren zwischen Bildern und Leinwänden sind möglicherweise einfacher als Sie denken. In zukünftigen Artikeln werde ich über einige Techniken zum Anwenden verschiedener Filter auf diese Bilder schreiben.

Empfohlenes Tutorial: „Javascript-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Canvas-Inhalte mit JavaScript in Bilder umwandelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!