Převod obrazu na plátno JavaScriptu

Na Mozilla WebDev Offsite minulý týden jsme všichni strávili polovinu posledního dne hackováním naší budoucí aplikace Mozilla Marketplace. Jednou z mobilních aplikací, která si nedávno získala velkou pozornost, byl Instagram, který byl prodán Facebooku za netopýřího šílence cena jedné miliardy dolarů. Protože by mi nevadilo mít účet na svém zadním účtu, rozhodl jsem se vytvořit aplikaci ve stylu Instagramu (o kterou se s vámi v budoucnu podělím). Tento příspěvek podrobně popisuje, jak můžete převést obrázek na plátno a převést plátno zpět na obrázek.

Převést obrázek na plátno pomocí JavaScriptu

Chcete-li převést obrázek na plátno, použijte kontext prvku plátna drawImage metoda:

// 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;
}

0, 0 argumenty se mapují na souřadnice na plátně, kde by měla být umístěna obrazová data.

Převést plátno na obrázek pomocí JavaScriptu

Za předpokladu, že byly provedeny úpravy obrázku, můžete data plátna snadno převést na data obrázku pomocí následujícího úryvku:

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

Výše uvedený kód magicky převede plátno na URI dat PNG!

Bohužel, převod obrázku na plátno a plátno na obrázek je pravděpodobně mnohem jednodušší, než si myslíte. V budoucích příspěvcích podrobně uvedu, jak můžete na nakreslený obrázek použít různé obrazové filtry. Mezitím začněte kupovat luxusní auta a domy s budoucí miliardou, kterou budete mít!