Méthode HTML canvas getImageData()

Manuel de référence du canvas HTML5

Définition et utilisation

getImageData() La méthode retourne un objet ImageData qui copie les données de pixels de la zone spécifiée du canevas.

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)

Les informations de couleur/alpha existent sous forme d'array et sont stockées dans l'objet ImageData data propriété.

Astuce :Après avoir opéré sur les informations de couleur/alpha dans le tableau, vous pouvez utiliser putImageData() La méthode copie les données d'image sur le canevas.

Exemple :

Le code suivant permet d'obtenir les informations de couleur/alpha du premier pixel de l'objet ImageData retourné :

red=imgData.data[0];
green=imgData.data[1];
green=imgData.data[1];
blue=imgData.data[2];

Essayez-le vous-même

Astuce :alpha=imgData.data[3];

Vous pouvez également utiliser la méthode getImageData() pour inverser la couleur de chaque pixel d'une image sur le canevas.

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Voir l'exemple "Essayer par vous-même" ci-dessous.)

Exemple

Exemple 1

Le code suivant copie les données des pixels d'un rectangle spécifique du canevas à l'aide de getImageData() et les place de nouveau sur le canevas avec putImageData() :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Essayez-le vous-même

Astuce :Plus d'exemples sont disponibles en bas de page.

Syntaxe

var imgData=context.getImageData(x,y,width,height);

Valeur des paramètres

Paramètres Description
x Coordonnée x du coin supérieur gauche du début de la copie.
y Coordonnée y du coin supérieur gauche du début de la copie.
width Largeur de la zone rectangulaire à copier.
height Hauteur de la zone rectangulaire à copier.

Plus d'exemples

Exemple 2

Image à utiliser :

The Tulip

Utilisez getImageData() pour inverser la couleur de chaque pixel de l'image 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 img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Inverser les couleurs
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

Essayez-le vous-même

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