Exemple
Le code ci - dessous les copies des données de pixels pour un rectangle spécifié sur la toile avec getImageData() , et ensuite mettre les données d'image 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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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.
Note: L'objet ImageData est pas une image, elle spécifie une partie (rectangle) sur la toile, et contient des informations de chaque pixel dans ce rectangle.
Pour chaque pixel dans un objet ImageData il y a quatre éléments d'information, les valeurs RGBA:
R - La couleur rouge (from 0-255)
G - La couleur verte (from 0-255)
B - La couleur bleue (from 0-255)
A - Le canal alpha (from 0-255; 0 is transparent and 255 is fully visible)
Les informations de couleur / alpha est maintenue dans une matrice, et est stocké dans la donnée propriété de l'objet ImageData.
Tip: Après avoir manipulé les informations couleur / alpha dans le tableau, vous pouvez copier les données d'image en arrière sur la toile avec la putImageData() méthode.
Example:
Le code pour obtenir des informations de couleur / alpha du premier pixel dans l'objet retourné ImageData:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip: Vous pouvez également utiliser la getImageData() méthode pour inverser la couleur de tous les pixels d'une image sur la toile.
Une boucle sur tous les pixels et modifier les valeurs de couleur à l'aide de la formule suivante:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Voir ci - dessous "Try it Yourself" - "Try it Yourself" par exemple!
Syntaxe JavaScript
| syntaxe JavaScript: | context . getImageData( x,y,width,height ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description |
|---|---|
| x | La coordonnée x (in pixels) du coin supérieur gauche pour démarrer la copie à partir de |
| y | La coordonnée y (in pixels) du coin supérieur gauche pour démarrer la copie à partir de |
| width | La largeur de la zone rectangulaire vous copierez |
| height | La hauteur de la zone rectangulaire vous copierez |
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 vous - même » <Canvas objet