Propriété data de l'objet ImageData du Canvas
Exemple
Créez un objet ImageData de 100 x 100 pixels où chaque pixel est défini sur la couleur rouge :
Canvas
JavaScript :
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const imgData = ctx.createImageData(100, 100);
for (let 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); Description
La propriété data renvoie un objet contenant les données d'image d'un objet ImageData.
Pour chaque pixel dans un objet ImageData, il y a quatre informations, 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 complètement visible)
Les informations de couleur et d'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; Syntaxe
| imageData .data |
Voir aussi :
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
imageData.data est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |