Méthode putImageData() du canevas

Manuel de référence Canvas

Définition et utilisation

putImageData() Méthode qui met les données d'image (à partir de l'objet ImageData spécifié) sur le canevas.

Astuce :Voir aussi getImageData() Méthode qui peut copier les données des pixels d'un rectangle spécifique du canevas.

Astuce :Voir aussi createImageData() Méthode qui peut créer un nouvel objet ImageData vierge.

Exemple

Le code suivant copie les données des pixels d'un rectangle spécifique du canevas à l'aide de getImageData(), puis remet les données d'image sur le canevas à l'aide de putImageData():

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
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

Syntaxe

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Valeur du paramètre

Paramètres Description
imgData Définit l'objet ImageData à remettre sur le canevas.
x Coordonnée x du coin supérieur gauche de l'objet ImageData, en pixels.
y Coordonnée y du coin supérieur gauche de l'objet ImageData, en pixels.
dirtyX Optionnel. La valeur horizontale (x), en pixels, pour la position de l'image sur le canevas.
dirtyY Optionnel. La valeur horizontale (y), en pixels, pour la position de l'image sur le canevas.
dirtyWidth Optionnel. La largeur utilisée pour dessiner une image sur le canevas.
dirtyHeight Optionnel. La hauteur utilisée pour dessiner une image sur le canevas.

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Manuel de référence Canvas