CanvasRenderingContext2D.getImageData()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
Specification |
---|
HTML # dom-context-2d-getimagedata-dev |
Compatibilité des navigateurs
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getImageData |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
Voir aussi
- L'interface le définissant :
CanvasRenderingContext2D
. ImageData
- Manipulation de pixels avec canvas