Méthode putImageData()
Exemple
Copiez les données de pixels d'un rectangle avec getImageData(). Ensuite, remettez les données de l'image sur le canvas avec putImageData() :
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);
} Description
La méthode putImageData() remet les données de l'image (d'un objet ImageData spécifié) sur le canvas.
Voir aussi :
Syntaxe
| context .putImageData( imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight ) |
Valeurs des paramètres
| Param | Description |
|---|---|
| imgData | L'objet ImageData à mettre sur le contexte. |
| x | La coordonnée x, en pixels, de l'image. |
| y | La coordonnée y, en pixels, de l'image. |
| dirtyX | Optionnel. La coordonnée x. Par défaut : 0. |
| dirtyY | Optionnel. La coordonnée y. Par défaut : 0. |
| dirtyWidth | Optionnel. La largeur. Par défaut : la largeur de l'image extraite. |
| dirtyHeight | Optionnel. La hauteur. Par défaut : la hauteur de l'image extraite. |
Valeurs de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
putImageData() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |