La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un  objet ImageData  représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy)  et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

Syntaxe

ImageData ctx.getImageData(sx, sy, sw, sh);

Paramètres

sx
La coordonnée x du coin supérieur gauche du rectangle à partir duquel ImageData sera extrait.
sy
La coordonnée y du coin supérieur gauche du rectangle à partir duquel ImageData  sera extrait.
sw
La largeur du rectangle à partir duquel ImageData sera extrait.
sh
La hauteur du rectangle à partir duquel ImageData sera extrait.

Valeur retournée

Un objet ImageData  contenant les données de l'image pour le rectangle donné du canevas.

Erreurs renvoyées

IndexSizeError
Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.

Exemples

Utilisation de la méthode  getImageData

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Manipulation de pixels avec canvas et l'objet ImageData.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'CanvasRenderingContext2D.getImageData' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui

Oui

51

Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui

Oui

51

Oui Oui ?

1. getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, loella16, Nerostalgeek
 Dernière mise à jour par : SphinxKnight,