Método putImageData() del lienzo Canvas

Manual de referencia de Canvas

Definición y uso

putImageData() Método que coloca los datos de la imagen en el lienzo desde el objeto ImageData especificado.

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

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

Ejemplo

El siguiente código copia los datos de píxeles de un rectángulo específico en el lienzo utilizando getImageData(), y luego coloca los datos de la imagen en el lienzo utilizando 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);
}

Prueba por tu cuenta

Sintaxis

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 del esquina superior izquierda del objeto ImageData, en píxeles.
y Coordenada y del esquina superior izquierda del objeto ImageData, en píxeles.
dirtyX Opcional. Valor horizontal (x), en píxeles, de la posición en la que se coloca la imagen en el lienzo.
dirtyY Opcional. Valor horizontal (y), en píxeles, de la posición en la que se coloca la imagen en el lienzo.
dirtyWidth Opcional. El ancho utilizado para dibujar imágenes en el lienzo.
dirtyHeight Opcional. La altura utilizada para dibujar imágenes en el lienzo.

Soporte del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

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

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

Manual de referencia de Canvas