Apprenez à utiliser Canvas pour traiter des images

Canvas, traduit par canevas en chinois, possède un nouvel élément <canvas> en HTML5, qui peut être combiné avec JavaScript pour dessiner dynamiquement des graphiques dans le canevas.

Aujourd'hui, nous ne parlerons pas de dessin graphique dans Canvas, mais de comment traiter des images.

Le processus est probablement très simple et se divise principalement en trois étapes suivantes :

Oui, aussi simple que de mettre un éléphant dans un réfrigérateur, haha.

Les principales API Canvas utilisées dans l'ensemble du processus sont :

1. Dessiner une image : drawImage()
2. Récupérer les données d'image : getImageData()
3. Réécrire les données de l'image : putImageData()
4. Exporter l'image : toDataURL()

Comme son nom l'indique, cette méthode est utilisée pour dessiner des images sur le canevas Canvas. Il existe trois utilisations spécifiques :

① Positionnez l'image sur le canevas : context.drawImage(img,x,y)

② Positionnez l'image sur le canevas et spécifiez la largeur et la hauteur de l'image : context.drawImage(img,x,y,width,height)

③ Coupez l'image et positionnez la partie coupée sur le canevas : context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

Cette méthode est utilisée pour obtenir des données d'image à partir du canevas Canvas. L'utilisation spécifique est la suivante :

Obtenez les données de pixels dans la plage rectangulaire spécifiée du canevas : var ImageData = context.getImageData(x,y,width,height)

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

Cette méthode renverra un objet ImageData, qui possède trois propriétés : width, height et data. Le tableau de données que nous utilisons principalement est le suivant, car il enregistre les données de chaque pixel de l'image. Après avoir obtenu ces données, nous pouvons les traiter, et enfin les réécrire dans le canevas Canvas, réalisant ainsi le traitement et la conversion des images. Pour l'utilisation spécifique du tableau de données, nous pouvons le voir dans les exemples suivants.

Cette méthode est très simple et est utilisée pour réécrire les données d'image dans le canevas Canvas. L'utilisation spécifique est la suivante :

 contexte.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

Cette méthode est différente des trois méthodes ci-dessus. C'est une méthode de l'objet Canvas. Cette méthode renvoie une chaîne contenant l'URI des données. Cette chaîne peut être directement utilisée comme adresse de chemin d'image pour remplir l'attribut src du <img. > balise Plus précisément, l'utilisation est la suivante :

 var dataURL = canvas.toDataURL(type, encoderOptions);

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

Cet exemple présentera brièvement comment traiter des images couleur en images noir et blanc via du code.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=process pictures/><input id=create type=button value=générer des images /><div id=result></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Obtenir le contexte de l'objet Canvas Canvas = canvas.getContext('2d'); //Obtenir l'objet de contexte 2D, la plupart des API Canvas le sont Cette méthode objet var image = new Image(); //Définir un objet image image.src = 'imgs/img.jpg'; image.onload = function(){ //Vous devez faire attention ici ! Toutes les opérations ultérieures doivent être effectuées une fois l'image chargée avec succès, sinon l'image sera traitée de manière invalide context.drawImage(image,0,0); //Commencez à dessiner l'image à partir du coin supérieur gauche (0,0) du canevas. canvas. La taille par défaut est Taille réelle de l'image var handle = document.getElementById(handle); var create = document.getElementById(create); handle.onclick = function(){ // Cliquez sur le bouton de traitement d'image pour traiter l'image. var imgData = context.getImageData(0,0,canvas.width,canvas.height); //Obtenir l'objet de données d'image var data = imgData.data; //Obtenir le tableau de données d'image. Chaque pixel du tableau est enregistré avec 4 éléments. Représente respectivement les valeurs de rouge, vert, bleu et transparence var moyenne = 0; pour (var i = 0; i < data.length; i+=4) { moyenne = Math.floor((data[i]+data[i+1]+data[i+2])/3 //Faites la moyenne des valeurs rouge, verte et bleue pour obtenir la valeur en niveaux de gris data[i]); = data[i+1] = data[i+2] = moyenne ; Réécrire la valeur de couleur de chaque pixel} imgData.data = data; context.putImageData(imgData,0,0); //Réécrivez les données d'image traitées sur le canevas et l'image dans le canevas devient en noir et blanc}; create.onclick = function(){ // Cliquez sur le bouton Générer une image pour exporter l'image var imgSrc = canvas.toDataURL( ); //Obtenir le DataURL de l'image var newImg = new Image(); var result = document.getElementById(result); //Attribuer le chemin de l'image à src; result.innerHTML = ''; result.appendChild(newImg);

Peut-être que le code ci-dessus n'est pas très bien écrit et qu'il ne semble pas si facile à comprendre. Il est préférable de l'écrire vous-même afin de pouvoir le comprendre plus en profondeur.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.