Propriété des données ImageData du canevas HTML
Exemple
Créez un objet ImageData de 100*100 pixels où chaque pixel est défini sur la couleur rouge :
Toile
JavaScript :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| data | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
La propriété data renvoie un objet qui contient les données d'image de l'objet ImageData spécifié.
Pour chaque pixel d'un objet ImageData, il existe quatre éléments d'information, les valeurs RGBA :
R - La couleur rouge (de 0 à 255)
G - La couleur verte (de 0 à 255)
B - La couleur bleue (de 0 à 255)
A - Le canal alpha (de 0 à 255 ; 0 est transparent et 255 est entièrement visible)
Les informations de couleur/alpha sont conservées dans un tableau et sont stockées dans la propriété data de l'objet ImageData.
Exemples:
La syntaxe pour rendre le premier pixel de l'objet ImageData rouge :
imgData=ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
La syntaxe pour rendre le deuxième pixel de l'objet ImageData vert :
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Conseil : Consultez createImageData() , getImageData() et putImageData() pour en savoir plus sur l'objet ImageData.
Syntaxe JavaScript
| Syntaxe JavaScript : | imageData .data; |
|---|
❮ Référence de canevas HTML