Méthode createImageData()du canvas HTML

HTML canvas 参考手册 Manuel de référence HTML canvas

Exemples

Créez un objet ImageData de 100*100 pixels dans lequel chaque pixel est rouge, puis placez-le sur le canvas :

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 »

Prise en charge des navigateurs

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode createImageData().

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode createImageData() crée un nouvel objet ImageData vide. La valeur de pixel par défaut du nouvel objet est un noir transparent.

Pour chaque pixel de l'objet ImageData, il existe quatre informations, à savoir les valeurs RGBA :

R - Rouge (0-255)
G - Vert (0-255)
B - Bleu (0-255)
A - Canal alpha (0-255 ; 0 est transparent, 255 est entièrement visible)

Par conséquent, le noir transparent représente (0,0,0,0).

Les informations de couleur/alpha existent sous forme de tableau, et comme le tableau contient quatre informations pour chaque pixel, la taille du tableau est quatre fois celle de l'objet ImageData : width*height*4. (Il existe une manière plus simple d'obtenir la taille du tableau, qui consiste à utiliser ImageDataObject.data.length)

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

Astuce :Après avoir fini de manipuler les informations de couleur/alpha dans le tableau, vous pouvez utiliser la méthodeputImageData()pour recopier les données d’image sur le canvas.

Exemple :

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. Créez un nouvel objet ImageData avec les dimensions spécifiées (en pixels) :

Syntaxe JavaScript :	var imgData=context.createImageData(width,height);

2. Créez un nouvel objet ImageData avec les mêmes dimensions qu'un autre objet ImageData spécifié (sans copier les données de l'image) :

Syntaxe JavaScript :	var imgData=context.createImageData(imageData);

Valeurs des paramètres

Paramètre	Description
width	La largeur de l'objet ImageData, en pixels.
height	La hauteur de l'objet ImageData, en pixels.
imageData	Un autre objet ImageData.

Manuel de référence HTML canvas Autres extensions

HTMLBalise