Méthode createImageData() de Canvas

Manuel de référence Canvas

Définition et utilisation

createImageData() Méthode pour créer un nouveau ImageData object vide. La valeur par défaut des pixels du nouveau object est noir transparent.

Pour chaque pixel de l'objet ImageData, il existe quatre types d'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 complètement visible)

Par conséquent, le noir transparent est représenté par (0,0,0,0).

Les informations color/alpha existent sous forme d'array, et comme l'array contient quatre informations pour chaque pixel, la taille de l'array est quatre fois la taille de l'objet ImageData. (Il y a un moyen plus simple d'obtenir la taille de l'array, c'est d'utiliser ImageDataObject.data.length)

L'array contenant les informations color/alpha est stocké dans l'objet ImageData. data dans les propriétés.

Avis :Après avoir effectué l'opération sur les informations color/alpha du tableau, vous pouvez utiliser putImageData() La méthode copie les données d'image sur le canevas.

Exemple :

Cette syntaxe change le premier pixel de l'objet ImageData en rouge :

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Cette syntaxe change le deuxième pixel de l'objet ImageData en rouge :

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Exemple

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

Votre navigateur ne prend pas en charge la balise canvas HTML5.

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

Syntaxe

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

1. Créer un nouveau objet ImageData avec les dimensions spécifiées (en pixels) :

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

2. Créer un nouveau objet ImageData de la même taille que l'autre objet ImageData spécifié (sans copier les données d'image) :

var imgData=context.createImageData(imageData);

Valeur du paramètre

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.

Prise en charge des navigateurs

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Manuel de référence Canvas