Exemple
Le code ci - dessous les copies de données de pixels pour un rectangle spécifié sur la toile avec getImageData() , puis mettre les données d'image en arrière sur la toile 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 » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| getImageData() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le getImageData() méthode retourne un objet ImageData qui copie les données de pixels pour le rectangle spécifié sur une toile.
Remarque: L'objet ImageData est pas une image, il spécifie une partie (rectangle) sur la toile, et contient des informations de chaque pixel à l' intérieur de ce rectangle.
Pour chaque pixel dans un objet ImageData il y a quatre éléments d'information, les valeurs RGBA:
R - La couleur rouge (0-255)
G - La couleur verte (0-255)
B - La couleur bleue (0-255)
A - Le canal alpha (0-255; 0 est transparent et 255 est entièrement visible)
Les informations de couleur / alpha est maintenue dans un tableau, et est stocké dans la data propriété de l'objet ImageData.
Astuce: Après avoir manipulé les informations de couleur / alpha dans le tableau, vous pouvez copier les données d'image en arrière sur la toile avec le putImageData() méthode.
Exemple:
Le code pour obtenir des informations de couleur / alpha du premier pixel dans l'objet ImageData retourné:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Essayez - le vous - même » Astuce: Vous pouvez également utiliser la getImageData() méthode pour inverser la couleur de tous les pixels d'une image sur la toile.
Boucle à travers tous les pixels et modifier les valeurs de couleur à l'aide de cette formule:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Voir ci-dessous «Essayez vous-même» par exemple!
JavaScript Syntaxe
| Syntaxe JavaScript: | context.getImageData(x,y,width,height); |
|---|
Paramètre valeurs
| Paramètre | La description |
|---|---|
| x | La coordonnée x (en pixels) du coin supérieur gauche pour démarrer la copie à partir |
| y | La coordonnée y (en pixels) du coin supérieur gauche pour démarrer la copie à partir |
| width | La largeur de la zone rectangulaire que vous allez copier |
| height | La hauteur de la zone rectangulaire que vous allez copier |
Autres exemples
Image à utiliser:
Exemple
Utilisez getImageData() pour inverser la couleur de tous les pixels d'une image sur la toile:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
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 »