Comment manipuler les pixels avec la balise canvas HTML5

Avec HTML5, vous pouvez extraire les données d'un toile marquer dans les données de pixels sous-jacents. Manipulation de ces données, vous offre un grand contrôle de votre image en temps réel. Vous pouvez utiliser ces données pour l'équilibrage des couleurs ainsi que pour expérimenter avec vos propres flous, aiguise, et les effets de chroma-key.

Peu importe quel format d'une image est stockée dans le système de fichiers, il est affiché comme une liste de pixels. Chaque pixel est représenté (dans le système 32 bits standard, de toute façon) par quatre entiers: RGBA. La R représente combien rouge est dans le point courant, G signifie pour le vert et B signifie 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 pour le format de données d'image, vous obtenez un énorme tableau 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:

 fonction draw () {var dessin = document.getElementById ("dessin") - var con = drawing.getContext («2D») - var originale = document.getElementById ("original") - CANV_WIDTH = 200 = 200 CANV_HEIGHT / / attirer l'original sur la canvascon.drawImage (original, 0, 0) - // obtenir l'image dataimgData = con.getImageData (0, 0, 200, 200) - // boucle à travers l'image Données de la (rang = 0- rangée lt; Rangée CANV_HEIGHT- ++) {for (col = 0- col lt; Col CANV_WIDTH- ++) {// trouver actuelle pixelindex = (col + (ligne * imgData.width)) * 4 - // séparer en couleur valuesr = imgData.data [index] = -g imgData.data [index + 1] - b = imgData.data [index + 2] -a = imgData.data [index + 3] - // manipuler la couleur valuesr - = 20 g + = 50-b - = 30-A = A - // gérer conditionsif limite (r> 255) {r = 255-} if (r lt; 0) {r = 0-} if (g> 255) {g = 255-} if (g lt; 0) {g = 0-} if (b> 255) {r = 255-} if (b lt; 0) {b = 0-} if (a> 255) {a = 255-} if (un lt; 0) {a = 0 -} // retourner nouvelles valeurs à dataimgData.data [index] = r-imgData.data [index + 1] = g-imgData.data [index + 2] = b-imgData.data [index 3] = a-} // fin col boucle for} // ligne de fin de boucle // dessiner nouvelle image sur canvascon.putImageData (imgData, 0, 0) -} // fonction de fin

Alors que la liste de code semble assez longue, il est vraiment pas trop difficile à suivre:

1. Dessiner une image originale.

   La technique que vous allez utiliser extrait des données à partir d'un élément de toile, afin de modifier une image, vous devez d'abord dessiner sur une toile. Vous pouvez utiliser l'ordinaire drawImage () Procédé.

2. Extraire les données d'image.

   
   
   
   
   

   La getImageData () méthode obtient l'image affichée par le canevas courant et le place dans un immense tableau d'entiers.

3. Faire une boucle pour gérer les lignes.

   Les données d'image est divisé en lignes et en colonnes. Chaque ligne va de 0 à la hauteur de la toile, donc faire un pour boucle pour itérer sur les lignes.

4. Faire une autre boucle pour gérer les colonnes.

   A l'intérieur de chaque rangée est suffisamment de données pour passer de 0 à la largeur de la toile, donc faire une deuxième boucle for intérieur de la première. Il est très courant d'utiliser une paire de imbriquée pour boucles pour parcourir les données en deux dimensions comme des informations d'image.

5. Trouver l'indice imageData pour la ligne et la colonne actuelle.

   La imageData tableau contient quatre entiers pour chaque pixel, nous avons donc à faire un peu de mathématiques pour comprendre où le premier entier pour chaque pixel est. La formule la plus simple est de multiplier le nombre de lignes par la largeur de la toile, ajouter que le nombre de colonne, et multiplier le résultat entier par quatre.

6. Tirer les valeurs de couleur correspondant de l'indice.

   L'indice représente également la valeur de rouge du pixel courant. Le prochain int détient la valeur verte, suivie par la valeur de bleu, et enfin la valeur alpha.

7. Manipuler les valeurs de couleur que vous voulez.

   Si vous allez faire une application de couleur équilibrage, vous pouvez simplement ajouter ou soustraire des valeurs pour changer la balance des couleurs. Vous pouvez également faire un travail beaucoup plus complexe si vous voulez jouer avec niveau pixel manipulation d'image.

8. Vérifiez limites.

   Une valeur de pixel ne peut être inférieur à 0 ou supérieur à 255, afin de vérifier à la fois de ces limites et de régler toutes les valeurs de pixels pour être dans les limites légales.

9. Retour valeurs manipulées retour à la imgData tableau.

   Vous pouvez copier des valeurs de retour à la matrice, et vous devez le faire pour apporter les changements visibles.

10. Dessiner les données d'image Retour à la toile.

    La putImageData () fonction dessine les données d'image actuelles de retour sur la toile comme une image ordinaire. La nouvelle version de l'image de refléter les changements.