Méthode getImageData()
Exemple
Copiez les données des pixels d'un rectangle spécifié sur le canevas, puis remettez les données d'image sur le canevas :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
} Plus d'exemples ci-dessous.
Description
La méthode getImageData() renvoie un objet ImageData qui copie les données des pixels pour le rectangle spécifié sur un canevas.
Remarque : L'objet ImageData n'est pas une image, il spécifie une partie (rectangle) du canevas et contient des informations sur chaque pixel à l'intérieur de ce rectangle.
Pour chaque pixel dans un objet ImageData, il y a quatre morceaux 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 complètement visible)
Les informations de couleur et d'alpha sont conservées dans un tableau et sont stockées dans la propriété data de l'objet ImageData.
Astuce : Après avoir manipulé les informations de couleur et d'alpha dans le tableau, vous pouvez copier les données d'image sur le canevas avec la méthode putImageData() .
Exemple :
Le code pour obtenir les informations de couleur et d'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];
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 changez les valeurs de couleur en utilisant 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" !
Voir aussi :
Syntaxe
| context .getImageData( x, y, width, height ) |
Valeurs des paramètres
| Param | Description |
|---|---|
| x | La coordonnée x (en pixels) du coin supérieur gauche à copier |
| y | La coordonnée y (en pixels) du coin supérieur gauche à copier |
| width | La largeur de la zone rectangulaire à copier |
| height | La hauteur de la zone rectangulaire à copier |
Valeur de retour
| Objet Image Data |
Plus d'exemples
Image à utiliser :
Exemple
Utilisez getImageData() pour inverser la couleur de chaque pixel d'une image sur le canevas :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, c.width, c.height);
// inverser les couleurs
for (let 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); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
getImageData() est pris en charge par tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |