Vidéo: Complete Animation Workflow (Adobe Character Animator Tutorial) 2025
HTML5 vous permet d'extraire les données d'une balise canvas dans les données de pixels sous-jacentes. La manipulation de ces données vous donne un contrôle étendu de votre image en temps réel. Vous pouvez utiliser ces données pour l'équilibrage des couleurs, ainsi que pour expérimenter vos propres flous, nettets et effets de chrominance.
Peu importe le format dans lequel une image est stockée dans le système de fichiers, elle est affichée sous la forme d'une liste de pixels. Chaque pixel est représenté (dans le système 32 bits standard, de toute façon) par quatre entiers: RGBA. Le R représente la quantité de rouge dans le point courant, G représente le vert et B le bleu. Le A représente alpha, qui est une mesure de la transparence de l'image. Chacune de ces valeurs peut varier de 0 à 255. Lorsque vous convertissez une image au format de données d'image, vous obtenez un grand nombre d'entiers. Chaque groupe de quatre images représente un seul pixel de données de couleur.
Ce code modifie la balance des couleurs d'une image:
function draw () {var drawing = document. getElementById ("dessin"); var con = dessin. getContext ("2d"); var original = document. getElementById ("original"); CANV_WIDTH = 200; CANV_HEIGHT = 200; // dessine l'original sur la toile con. drawImage (original, 0, 0); // récupère les données d'image imgData = con. getImageData (0, 0, 200, 200); // boucle les données d'image pour (ligne = 0; ligne 255) {r = 255;} si (r 255) {g = 255; g 255) {r = 255;} si (b <0) {b = 0;} si (a> 255) {a = 255;} si (a <0) {a = 0;} // retourner de nouvelles valeurs aux données imgData. données [index] = r; imgData. données [index + 1] = g; imgData. données [index + 2] = b; imgData. data [index + 3] = a;} // end col pour la boucle} // end row pour la boucle // dessine une nouvelle image sur canvas con. putImageData (imgData, 0, 0);} // fin de la fonction
Alors que la liste des codes semble assez longue, elle n'est vraiment pas trop difficile à suivre:
-
Dessine une image originale.
La technique que vous utiliserez extrait les données d'un élément de canevas. Pour modifier une image, vous devez d'abord la dessiner sur un canevas. Vous pouvez utiliser la méthode drawImage () ordinaire.
-
Extrayez les données d'image.
La méthode getImageData () obtient l'image affichée par le canevas actuel et la place dans un vaste tableau d'entiers.
-
Faites une boucle pour gérer les lignes.
Les données d'image sont divisées en lignes et en colonnes. Chaque ligne va de 0 à la hauteur de la toile, alors faites une boucle for pour parcourir les lignes.
-
Faites une autre boucle pour gérer les colonnes.
A l'intérieur de chaque ligne, il y a assez de données pour aller de 0 à la largeur de la toile, alors faites une seconde pour la boucle à l'intérieur de la première.Il est très fréquent d'utiliser une paire de boucles imbriquées pour parcourir des données bidimensionnelles comme des informations d'image.
-
Trouvez l'index dans imageData pour la ligne et la colonne en cours.
Le tableau imageData contient quatre entiers pour chaque pixel, donc nous devons faire un peu de maths pour savoir où est le premier entier pour chaque pixel. La formule la plus simple consiste à multiplier le nombre de lignes par la largeur du canevas, à l'ajouter au nombre de colonnes et à multiplier le résultat entier par quatre.
-
Tirez les valeurs de couleurs correspondantes à partir de l'index.
L'index représente également la valeur rouge du pixel courant. Le prochain int contient la valeur verte, suivie par la valeur bleue, et enfin la valeur alpha.
-
Manipulez les valeurs de couleur comme vous le souhaitez.
Si vous voulez créer une application d'équilibrage des couleurs, vous pouvez simplement ajouter ou soustraire des valeurs pour modifier l'équilibre général des couleurs. Vous pouvez également faire un travail beaucoup plus élaboré si vous voulez jouer avec la manipulation d'image au niveau des pixels.
-
Vérifiez les limites.
La valeur d'un pixel ne peut pas être inférieure à 0 ou supérieure à 255. Vérifiez donc ces deux limites et ajustez toutes les valeurs de pixel pour les limites légales.
-
Retourne les valeurs manipulées dans le tableau imgData.
Vous pouvez copier des valeurs dans le tableau, et vous devriez le faire pour rendre les changements visibles.
-
Dessine les données d'image sur le canevas.
La fonction putImageData () renvoie les données de l'image en cours dans la zone de dessin en tant qu'image ordinaire. La nouvelle version de l'image reflétera les changements.
