Exemple
Créer un 100*100 objet ImageData pixels où chaque pixel est rouge, et le mettre sur la toile:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var 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); Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createImageData() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le createImageData() méthode crée un nouvel objet ImageData vide. Les valeurs de pixels du nouvel objet sont noir transparent par défaut.
Pour chaque pixel dans un objet ImageData il y a quatre éléments d'information, les valeurs RGBA:
R - La couleur rouge (0-255)
G - La couleur verte (0-255)
B - La couleur bleue (0-255)
A - Le canal alpha (0-255; 0 est transparent et 255 est entièrement visible)
Donc, noir transparent indique: (0,0,0,0) .
Les informations de couleur / alpha est maintenue dans un tableau, et puisque le tableau contient 4 éléments d'information pour chaque pixel, la taille de la matrice est 4 fois la taille de l'objet ImageData: largeur * hauteur * 4. (Un moyen plus facile de trouver la taille de la matrice, est d'utiliser ImageDataObject.data.length)
Le tableau contenant les informations de couleur / alpha est stockée dans la data propriété de l'objet ImageData.
Astuce: Après avoir manipulé les informations de couleur / alpha dans le tableau, vous pouvez copier les données d'image en arrière sur la toile avec le putImageData() méthode.
Exemples:
La syntaxe pour faire le premier pixel dans les ImageData objet 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 faire le second pixel dans le vert de l'objet ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript Syntaxe
Il existe deux versions de la createImageData() méthode:
1. Ceci crée un nouvel objet ImageData avec les dimensions spécifiées (en pixels):
| Syntaxe JavaScript: | var imgData=context.createImageData(width,height); |
|---|
2. Cela crée un nouvel objet ImageData avec les mêmes dimensions que l'objet spécifié par anotherImageData (cela ne copie pas les données d'image):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
Paramètre valeurs
| Paramètre | La description |
|---|---|
| width | La largeur du nouvel objet ImageData, en pixels |
| height | La hauteur du nouvel objet ImageData, en pixels |
| imageData | objet anotherImageData |