CanvasRenderingContext2D.getImageData()

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

js
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

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

JavaScript

js
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

Specification
HTML Standard
# dom-context-2d-getimagedata-dev

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi