Méthode Canvas getImageData()

Manuel de référence Canvas

Définition et utilisation

getImageData() La méthode retourne un objet ImageData qui copie les données de pixels de la矩形 spécifiée sur le 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)

La couleur/alpha existe sous forme d'array et est stockée dans l'objet ImageData sous data propriété.

Astuce :Après avoir manipulé 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 peut obtenir les informations de couleur/alpha du premier pixel de l'objet ImageData retourné :

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

Essayer vous-même

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

Utilisez cette formule pour parcourir tous les pixels et changer leurs valeurs de couleur :

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

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

Exemple

Exemple 1

Le code suivant copie les données des pixels du rectangle spécifié sur le canevas en utilisant getImageData() et les place de nouveau sur le canevas en utilisant 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);
}

Essayer vous-même

Astuce :Plus d'exemples sont fournis 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 de début de copie.
y Coordonnée y du coin supérieur gauche de début de 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 HTML5 canvas.

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

Essayer vous-même

Support du navigateur

Les nombres 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 versions antérieures ne prennent pas en charge l'élément <canvas>.

Manuel de référence Canvas