Manuel de référence HTML

Tous les balises HTML

Méthode putImageData() de canvas HTML

putImageData() est Canvas 2D API qui dessine les données à partir de l'objet ImageData existant en méthode de bitmap. Si un rectangle dessiné est fourni, seuls les pixels de ce rectangle sont dessinés. Cette méthode n'est pas affectée par la matrice de transformation du canevas.

Manuel de référence HTML canvas

Exemple en ligne

Le code suivant utilise getImageData() pour copier les données de pixels du rectangle spécifié sur le canevas, puis utilise putImageData() pour placer les données d'image sur le canevas :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode getImageData() pour HTML canvas-Tutoriel de base(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　étiquette canvas.
</canvas>
<script>
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);
}
</script>
<button onclick="copy()">Copier</button>
</body>
</html>

Vérifiez avec le test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge la méthode putImageData().

Remarque :Internet Explorer 8 Les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode putImageData() place les données d'image ( provenant de l'objet ImageData spécifié) sur le canevas.

Conseil :Voir getImageData() Méthode, qui peut copier les données de pixels du rectangle spécifié sur le canevas.

Conseil :Voir createImageData() Méthode qui peut créer un nouveau objet ImageData vierge.

Syntaxe JavaScript

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

Valeur du paramètre

Paramètres	Description
imgData	Définir l'objet ImageData à replacer 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. Valeur horizontale (x), en pixels, pour positionner l'image sur le canevas.
dirtyY	Optionnel. Valeur verticale (y), en pixels, pour positionner l'image sur le canevas.
dirtyWidth	Optionnel. Largeur utilisée pour dessiner l'image sur le canevas.
dirtyHeight	Optionnel. Hauteur utilisée pour dessiner l'image sur le canevas.

　Manuel de référence HTML canvas

HTML: Balise <template>