Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 canvas désigné par le rectangle qui commence aux positions (sx, sy)  et qui possède des attribut : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canvas.

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 canvas.

Erreurs renvoyées

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

Exemples

Utiliser la méthode  getImageData

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Pixel manipulation with 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 { width: 100, height: 100, data: Uint8ClampedArray[40000] }

Spécifications

Specification Status Comment
HTML Living Standard
La définition de 'CanvasRenderingContext2D.getImageData' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) [1] (Oui) (Oui) (Oui)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) (Oui) (Oui) (Oui) [1] (Oui) (Oui) (Oui)

[1] À partir de (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), getImageData() accepte désormais correctement les rectangles dépassent les limites du canvas ; les pixels à l'extérieur du canvas sont retournés sous forme de noir transparent et renvoie au moins une valeur d'image d'un pixel si un rectangle inférieur à un pixel est spécifié.

Voir également

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Nerostalgeek
 Dernière mise à jour par : Nerostalgeek,