Exemple
Le code ci - dessous les copies de données de pixels pour un rectangle spécifié sur la toile avec getImageData() , puis mettre les données d'image en arrière sur la toile avec putImageData() :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| putImageData() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le putImageData() méthode met les données d'image ( à partir d' un objet ImageData spécifié) retour sur la toile.
Astuce: Lisez à propos de la getImageData() méthode qui copie les données de pixels pour un rectangle spécifié sur une toile.
Astuce: Lisez à propos de la createImageData() méthode qui crée un nouvel objet de ImageData vide.
JavaScript Syntaxe
| Syntaxe JavaScript: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
Paramètre valeurs
| Paramètre | La description |
|---|---|
| imgData | Indique l'objet ImageData remettre sur la toile |
| x | La coordonnée x, en pixels, du coin supérieur gauche de l'objet ImageData |
| y | La coordonnée y, en pixels, du coin supérieur gauche de l'objet ImageData |
| dirtyX | Optionnel. La valeur horizontale (x), en pixels, où placer l'image sur la toile |
| dirtyY | Optionnel. La valeur verticale (y), en pixels, où placer l'image sur la toile |
| dirtyWidth | Optionnel. La largeur à utiliser pour dessiner l'image sur la toile |
| dirtyHeight | Optionnel. La hauteur à utiliser pour dessiner l'image sur la toile |