Manual de referencia HTML

Completísimo manual de etiquetas HTML

Método putImageData() del canvas HTML

putImageData() es Canvas 2D API es un método para dibujar datos desde un objeto ImageData existente en un mapa de bits. Si se proporciona un rectángulo dibujado, solo se dibujan los píxeles de ese rectángulo. Este método no se ve afectado por la matriz de transformación del lienzo.

Manual de referencia de canvas HTML

Ejemplo en línea

El siguiente código utiliza getImageData() para copiar los datos de píxeles del rectángulo especificado en el lienzo y luego coloca los datos de la imagen de vuelta en el lienzo utilizando putImageData():

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método getImageData() en HTML canvas-Tutoriales básicos(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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()">Copiar</button>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten el método putImageData().

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método putImageData() coloca los datos de la imagen (provenientes del objeto ImageData especificado) de vuelta en el lienzo.

Consejo:Ver getImageData() Método que puede copiar los datos de píxeles del rectángulo especificado en el lienzo.

Consejo:Ver createImageData() Método que crea un nuevo objeto ImageData en blanco.

Sintaxis de JavaScript

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

Valor del parámetro

Parámetro	Descripción
imgData	Objeto ImageData que se debe放置 en el lienzo.
x	Coordenada x superior izquierda del objeto ImageData, en píxeles.
y	Coordenada y superior izquierda del objeto ImageData, en píxeles.
dirtyX	Opcional. Valor horizontal (x), en píxeles, de la ubicación de la imagen en la cuadrícula.
dirtyY	Opcional. Valor vertical (y), en píxeles, de la ubicación de la imagen en la cuadrícula.
dirtyWidth	Opcional. La anchura utilizada para dibujar la imagen en la cuadrícula.
dirtyHeight	Opcional. La altura utilizada para dibujar la imagen en la cuadrícula.

　Manual de referencia de canvas HTML

HTML: <template> etiqueta