Toile HTML méthode getImageData()
Exemple
Le code ci-dessous copie les données de pixel pour un rectangle spécifié sur le canevas avec getImageData(), puis replace les données d'image 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);
}
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
La méthode getImageData() renvoie un objet ImageData qui copie les données de pixel pour le rectangle spécifié sur un canevas.
Remarque : L'objet ImageData n'est pas une image, il spécifie une partie (rectangle) sur le canevas et contient des informations sur chaque pixel à l'intérieur de ce rectangle.
Pour chaque pixel d'un objet ImageData, il existe quatre éléments d'information, les valeurs RGBA :
R - La couleur rouge (de 0 à 255)
G - La couleur verte (de 0 à 255)
B - La couleur bleue (de 0 à 255)
A - Le canal alpha (de 0 à 255 ; 0 est transparent et 255 est entièrement visible)
Les informations de couleur/alpha sont conservées dans un tableau et sont stockées dans la propriété data de l'objet ImageData.
Conseil : après avoir manipulé les informations de couleur/alpha dans le tableau, vous pouvez recopier les données d'image sur le canevas avec la méthode putImageData() .
Exemple:
Le code pour obtenir les informations de couleur/alpha du premier pixel dans l'objet ImageData renvoyé :
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Astuce : Vous pouvez également utiliser la méthode getImageData() pour inverser la couleur de chaque pixel d'une image sur le canevas.
Parcourez tous les pixels et modifiez les valeurs de couleur à l'aide de cette formule :
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Voir ci-dessous pour un exemple "Essayez-le vous-même" !
Syntaxe JavaScript
| Syntaxe JavaScript : | contexte .getImageData( x,y,largeur,hauteur ); |
|---|
Valeurs des paramètres
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Plus d'exemples
Image à utiliser :
Exemple
Utilisez getImageData() pour inverser la couleur de chaque pixel d'une image sur le canevas :
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
var i;
for (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);
❮ Référence de canevas HTML