HTML5 Traitement des pixels Canvas

HTML5 Méthode d'utilisation de la fonction createImageData() pour le traitement des pixels Canvas, démonstration en ligne des traitements de pixels Canvas, copie des pixels sur le canvas, définition de la syntaxe et des valeurs des attributs détaillées, etc.

Il est possible d'accéder à l'HTML5Les pixels de la toile. Vous pouvez utiliser l'objet ImageData pour faire cela. L'objet ImageData contient un tableau de pixels. En accédant à ce tableau, vous pouvez manipuler les pixels. Après avoir effectué les opérations sur les pixels, il est nécessaire de les copier sur la toile pour les afficher.

Créer un objet ImageData

Créer un objet ImageData est utilisé2Fonction createImageData() accomplie par le contexte HTML. Voici un exemple:

var canvas          = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,          height);

La fonction createImageData() de l'objet context définit les largeur et hauteur des zones de pixels représentées par l'objet ImageData créé. Dans l'exemple ci-dessus, l'ImageData créé a100 x 10Un objet de surface de 0 pixels.

Attributs ImageData

L'objet ImageData possède trois attributs:

• width

• height

• data

Les attributs width et height contiennent la largeur et la hauteur de la zone de données graphiques.
L'attribut data est un tableau d'octets contenant les valeurs des pixels.

traitement des pixels

　Chaque pixel de l'array data contient4Des valeurs de 1 octet. Rouge, vert et bleu constituent une valeur, le canal alpha une autre. La couleur du pixel est déterminée par le mélange des rouge, vert et bleu pour former la couleur finale. Le canal alpha indique la transparence du pixel. Chaque valeur de rouge, vert, bleu et alpha peut être comprise entre255Les valeurs entre
Voici un exemple de code pour définir la couleur et la valeur Alpha du premier pixel:

var pixelIndex = 0;
imageData.data[pixelIndex            ] =　255;　　//　red
imageData.data[pixelIndex　+　1] =            0;　　//　couleur verte
imageData.data[pixelIndex　+　2] =            0;　　//　couleur bleue
imageData.data[pixelIndex　+　3] =　255;

Veuillez utiliser le code suivant pour lire la valeur du pixel:

var pixelIndex = 0;
var red = imageData.data[pixelIndex          ];　　//　red
var green = imageData.data[pixelIndex　+　1];　　//　couleur verte
var blue = imageData.data[pixelIndex　+　2];　　//　couleur bleue
var alpha = imageData.data[pixelIndex　+　3];

Pour accéder à l'index du pixel suivant, augmentez la valeur de pixelIndex4Chaque pixel est composé de4composé de plusieurs éléments d'array, comme montré ci-dessus).
Vous pouvez calculer l'index d'un pixel donné ainsi :

　var index =　4　*　(x　+　y　*　);

Les x et y dans le calcul sont calculés comme les indices des pixels x et y des pixels. Les pixels de l'array data sont organisés en une séquence de pixels longs, commençant par le pixel supérieur gauche, se déplaçant vers la droite verticalement. Lorsque vous atteignez la fin de la ligne, la séquence de pixels continue du pixel le plus à gauche de la ligne suivante. Par conséquent, pour calculer l'index du pixel à l'emplacement x, vous devez multiplier la coordonnée y par le nombre de pixels par ligne, puis ajouter la valeur x.
C'est une explication20 pixels de large et8l'image de l'array de pixels ImageData de hauteurs de pixels. Dans le marge de droite, il est répertorié l'index de chaque ligne de pixels. Comme vous pouvez le voir, l'énumération des indices commence par 0 dans le coin supérieur gauche et augmente vers la droite. Lorsque vous atteignez la fin de la ligne, l'énumération continue de la ligne la plus basse, du pixel le plus à gauche, et continue vers la droite.

copier les pixels sur le canevas

Après avoir traité les pixels, vous pouvez utiliser2La fonction D context peut la copier sur le canevas avec putImageData(). Il y a deux versions de putImageFunction(). La première version de la fonction putImageData() copie tous les pixels sur le canevas. Voici un exemple :

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

Les paramètres canvasX et canvasY sont les coordonnées y où les pixels sont insérés sur le canevas.
La deuxième version de la fonction putImageData() peut copier un rectangle de pixels plutôt que tous les pixels sur le canevas. Voici un exemple de code :

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

Les paramètres sx et sy (sourceX et sourceY) sont les coordonnées x et y du coin supérieur gauche du rectangle, copiées à partir de l'array de pixels.
Les paramètres sWidth et sHeight (sourceWidth et sourceHeight) sont la largeur et la hauteur du rectangle, copiées à partir de l'array de pixels.

Récupération des pixels du canvas

Il est également possible de capturer un rectangle de pixel à partir du canevas dans un objet ImageData. Cela est réalisé en utilisant la fonction getImageData(). Voici un exemple :

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　context.getImageData(x, y, width, height);

Les paramètres x et y sont les coordonnées du coin supérieur gauche du rectangle du canevas.
Les paramètres width et height sont les dimensions du rectangle du canevas.