Comment manipuler les pixels sur la toile de javascript pour HTML5 et CSS3 programmation

La tag en javascript a un truc de plus incroyable dans sa manche pour HTML5 et CSS3 programmeurs. Vous pouvez extraire les données d'un marquer dans les données de pixels sous-jacents. Si vous savez comment manipuler ces données, vous pouvez avoir un contrôle étendu de votre image en temps réel. Vous pouvez utiliser ces données pour l'équilibrage des couleurs, ainsi que l'expérimentation de mesure flous, aiguise, et les effets de chroma-key.

Afin de comprendre comment avoir autant de contrôle de vos images, vous devez avoir une certaine connaissance de la façon dont les images sont stockées en mémoire. 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 valeur R représente la quantité de rouge se trouve dans le point courant. G signifie pour le vert et B signifie bleu. A représente l'alpha, qui est une mesure de la transparence de l'image. Chacune de ces valeurs peut varier à partir de 0 à 255.

Lorsque vous convertissez une image à la imageData, vous obtenez un énorme tableau d'entiers. Chaque groupe de quatre nombres entiers représente un seul pixel de données de couleur.

Voici un exemple qui change l'équilibre des couleurs d'une image:

 fonction draw () {// à partir du dessin de pixel.htmlvar = document.getElementById ("dessin") - var con = drawing.getContext («2D») - var originale = document.getElementById ("original") - CANV_WIDTH = 200 CANV_HEIGHT = 200 - // 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 (ligne = 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) -} // fin functionAlthough 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 des extraits des données d'un élément, afin de modifier une image, vous devez d'abord dessiner sur une toile.

  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 une 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 données à partir de 0 à la largeur de la toile, donc faire une deuxième pour boucle à l'intérieur de la première. Il est très courant d'utiliser une paire de boucles for imbriquées pour parcourir les données en deux dimensions comme des informations d'image.

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

    La imageData tableau contient quatre entiers pour chaque pixel, de sorte que vous aurez à 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 couleurs que vous le souhaitez.

    Si vous allez faire une application de couleur équilibrage, vous pouvez simplement ajouter ou soustraire des valeurs pour changer la balance des couleurs.

  8. Vérifiez limites.

    Une valeur de pixel ne peut pas être inférieure à 0 ou supérieure à 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 devriez le faire, pour faire les changements visibles.

  10. Dessinez le dos à 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.


» » » » Comment manipuler les pixels sur la toile de javascript pour HTML5 et CSS3 programmation