Exemple
Le code ci - dessous les copies des données de pixels pour un rectangle spécifié sur la toile avec getImageData() , et ensuite mettre les données d'image 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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| putImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le putImageData() méthode met les données d'image (from a specified ImageData object) à (from a specified ImageData object) d' (from a specified ImageData object) en arrière sur la toile.
Tip: En savoir plus sur la getImageData() méthode qui copie les données de pixels pour un rectangle spécifié sur une toile.
Tip: En savoir plus sur la createImageData() méthode qui crée un nouvel objet ImageData vide.
Syntaxe JavaScript
| syntaxe JavaScript: | context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description |
|---|---|
| imgData | Indique l'objet ImageData de 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 horizontal (x) la valeur, en pixels, où placer l'image sur la toile |
| dirtyY | Optionnel. La vertical (y) la valeur, 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 |
<Canvas objet