Exemple
Créer un 100 * 100 pixels objet ImageData 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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le createImageData() méthode crée un nouvel objet ImageData vide. La nouvelle valeurs de pixel de l'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 (from 0-255)
G - La couleur verte (from 0-255)
B - La couleur bleue (from 0-255)
A - Le canal alpha (from 0-255; 0 is transparent and 255 is fully visible)
Donc, noir transparent indique: (0,0,0,0) .
Les informations de couleur / alpha est maintenue dans une matrice, et étant donné que la matrice de 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 du tableau, est d'utiliser ImageDataObject.data.length)
Le tableau contenant les informations de couleur / alpha est stockée dans la donnée propriété de l'objet ImageData.
Tip: Après avoir manipulé les informations couleur / alpha dans le tableau, vous pouvez copier les données d'image en arrière sur la toile avec la putImageData() méthode.
Examples:
La syntaxe pour rendre 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 rendre le second pixel dans le vert d'objet ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Syntaxe JavaScript
Il existe deux versions du createImageData() méthode:
1. Cela 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 (this does not copy the image data) :
| syntaxe JavaScript: | var imgData = context . createImageData( imageData ) ; |
|---|
Les valeurs des paramètres
| 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 |
<Canvas objet