Toile HTML méthode createImageData()

Exemple

Créez un objet ImageData de 100*100 pixels où chaque pixel est rouge et placez-le sur le canevas :

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 méthode.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

Définition et utilisation

La méthode createImageData() crée un nouvel objet ImageData vide. Les valeurs de pixel du nouvel objet sont en noir transparent par défaut.

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)

Ainsi, le noir transparent indique : (0,0,0,0).

Les informations de couleur/alpha sont conservées dans un tableau, et puisque le tableau contient 4 éléments d'information pour chaque pixel, la taille du tableau est 4 fois la taille de l'objet ImageData : largeur*hauteur*4. (Un moyen plus simple de trouver la taille du tableau consiste à utiliser ImageDataObject.data.length)

Le tableau contenant les informations de couleur/alpha est stocké dans la propriété data de l'objet ImageData.

Conseil : après avoir manipulé les informations de couleur/alpha dans le tableau, vous pouvez recopier les données d'image sur le canevas avec la méthode putImageData() .

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 JavaScript

Il existe deux versions de la méthode createImageData() :

1. Cela crée un nouvel objet ImageData avec les dimensions spécifiées (en pixels) :

Syntaxe JavaScript :	var imgData= context .createImageData( largeur, hauteur );

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);

Valeurs des paramètres

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ Référence de canevas HTML