Méthode createImageData() de HTML canvas

Manuel de référence du Canvas HTML5

Définition et utilisation

createImageData() La méthode crée un nouveau objet ImageData vierge. La valeur par défaut des pixels de l'objet est noire transparente.

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)

Donc, transparent black signifie (0,0,0,0).

color/alpha existe sous forme d'array et, puisqu'il contient quatre informations par pixel, la taille de l'array est quadruple de celle de l'objet ImageData. (Il existe une méthode plus simple pour obtenir la taille de l'array, c'est d'utiliser ImageDataObject.data.length)

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

Astuce :Après avoir manipulé les informations color/alpha de l'array, 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, chaque pixel étant rouge, puis placez-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 de la taille spécifiée (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é (ne copie pas les données d'image) :

var imgData=context.createImageData(imageData);

Valeur du paramètre

Paramètres 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 du navigateur

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 du Canvas HTML5