Toile et image se convertir

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.

Dé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.