Explication détaillée de la façon de convertir le contenu Canvas en images à l'aide de JavaScript

Nous avons passé une demi-journée la semaine dernière à développer la prochaine application à mettre sur Mozilla Marketplace. Il existe une application très populaire en ce moment, c'est Instagram. Facebook a dépensé 1 million de dollars pour l'acquérir. Nous voulons également mettre 1 million de dollars dans nos poches, et j'ai décidé de développer une application de style Instagram. Dans cet article, je vais vous présenter comment copier une image dans un canevas et, ensuite, comment enregistrer le contenu du canevas en tant qu'image. .Formater.

Regardez la démo

Utilisez JavaScript pour copier l'image dans le canevas

Pour mettre l'image dans le canevas, nous utilisons la méthode drawImage de l'élément canevas :

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

Le paramètre 0, 0 ici est le point de coordonnées sur le canevas, et l'image sera copiée à cet endroit.

Utilisez JavaScript pour conserver le canevas au format image

Si votre travail sur le canevas est terminé, vous pouvez utiliser la méthode simple suivante pour convertir les données du canevas au format image :

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

Ce code peut comme par magie convertir une toile au format PNG !

Regardez la démo

Ces techniques de conversion entre images et toiles peuvent être plus simples que vous ne le pensez. Dans les prochains articles, j'écrirai sur certaines techniques permettant d'appliquer différents filtres à ces images.

Tutoriel recommandé : "Tutoriel vidéo javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!