Exemple de code pour convertir Canvas et Image l'un en l'autre_html5 compétences du didacticiel

Convertir JS Canvas en image
Démo originale : Démo de conversion d'image JavaScript Canvas
Lors de la conférence de développement Web Mozilla de la semaine dernière, nous avons passé la majeure partie de la journée à discuter des futures applications du marché Mozilla. Instagram, l'application mobile la plus populaire ces derniers temps, a été vendue à FaceBook pour la somme colossale d'un 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 (je la partagerai plus tard)

Cet article vous montre comment convertir une image en toile et comment toile extrait une Image .

Convertir l'image en canevas
Pour convertir l'image en canevas (plan de travail, canevas), vous pouvez utiliser la méthode drawImage du contexte de l'élément canevas :

Copier le code

Le code est le suivant :

// Convertir l'image en objet canevas
fonction convertImageToCanvas(image ) {
//Créez un élément DOM canevas et définissez sa largeur et sa hauteur pour qu'elles soient identiques à celles de l'image
var canvas = document.createElement("canvas");
canvas.height = image .height;
// Coordonnée (0,0) signifie partir d'ici, ce qui équivaut à un décalage.
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

Convertir le canevas en image
Assumer l'image a été Après le traitement sur le canevas, vous pouvez utiliser la méthode suivante pour convertir le canevas en un objet Image.

Copier le codeLe code est le suivant :

// Extraire l'image de canvas
function convertCanvasToImage(canvas) {
//Nouvel objet Image, qui peut être compris comme DOM
var image = new Image();
// canvas.toDataURL renvoie une chaîne encodée en Base64 Les URL, bien sûr, doivent être prises en charge par le navigateur lui-même
//Spécifiez le format PNG
image.src = canvas.toDataURL("image/png");

Eh bien ! La conversion d'images en toile est plus facile que vous ne le pensez. Je vais vous démontrer différentes techniques de traitement d'image à l'avenir. Je pense que vous pourrez certainement gagner beaucoup d'argent en utilisant ces techniques à l'avenir. avenir.