Commentaire: Cet article vous montre comment convertir l'image en canevas et comment extraire une image. L'exemple de code est le suivant. Les amis avec ce besoin peuvent y faire référence. J'espère que cela vous sera utile.
La toile JS et l'image se convertissentDémo original: Démo de conversion d'image en toile JavaScript
Lors de la conférence de développement Web de Mozilla de la semaine dernière, nous avons fini par passer la majeure partie de la journée à discuter des futures applications du marché de Mozilla. Instagram est l'application mobile la plus populaire récemment, vendue à Facebook pour un prix élevé de 1 milliard de dollars.
Cela ne me dérange pas de gagner de l'argent supplémentaire, alors j'ai décidé de créer une application de style Instagram (le partagerai plus tard)
Cet article vous montre comment convertir l'image en canevas et comment extraire une image.
Convertir l'image en toile
Pour convertir une image en toile (artboard, toile), vous pouvez utiliser la méthode DrawImage du contexte de l'élément Canvas:
// convertir l'image en objet canvas
fonction convertimagetocanvas (image) {
// Créez un élément Dom Canvas et définissez sa largeur et sa hauteur comme l'image
var canvas = document.CreateElement ("canvas");
canvas.width = image.width;
canvas.height = image.Height;
// Les coordonnées (0,0) indiquent le dessin d'ici, ce qui équivaut à décalage.
canvas.getContext ("2d"). DrawImage (image, 0, 0);
Canvas de retour;
}
Convertir la toile en image
En supposant que l'image a été traitée sur Canvas, vous pouvez utiliser la méthode suivante pour convertir le canevas en un objet d'image d'image.
// Extraire l'image de la toile
fonction convertCanvastoimage (canvas) {
// Le nouvel objet image peut être compris comme DOM
var image = new image ();
// canvas.todataurl renvoie une chaîne d'URL codées Base64. Bien sûr, le navigateur lui-même doit le soutenir.
// spécifie le format PNG
image.src = canvas.todataurl ("image / png");
Image de retour;
}
Euh! La conversion des images d'image et de la toile est plus facile que vous ne le pensez. À l'avenir, je vous démontrerai différentes technologies de traitement d'image. Je crois que vous gagnerez certainement beaucoup d'argent avec ces technologies à l'avenir.