método putImageData() del canvas HTML

Manual de referencia de HTML5 Canvas

definición y uso

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

sugerencia:ver getImageData() método, que puede copiar los datos de píxeles de un rectángulo específico en la lienzo.

sugerencia: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 la lienzo utilizando getImageData() y luego coloca los datos de imagen de vuelta en el lienzo utilizando putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="verde";
ctx.fillRect(10,10,50,50);
function copiar()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

pruébalo tú mismo

sintaxis

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

valores de parámetros

parámetros descripción
imgData Objeto ImageData que se debe放置 en el lienzo.
x Coordenada x del extremo superior izquierdo del objeto ImageData, en píxeles.
y Coordenada y del extremo superior izquierdo del objeto ImageData, en píxeles.
dirtyX Opcional. Valor horizontal (x), en píxeles, de la ubicación de la imagen en el lienzo.
dirtyY Opcional. Valor horizontal (y), en píxeles, de la ubicación de la imagen en el lienzo.
dirtyWidth Opcional. La anchura utilizada para dibujar la imagen en el lienzo.
dirtyHeight Opcional. La altura utilizada para dibujar la imagen en el lienzo.

Compatibilidad 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

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

Manual de referencia de HTML5 Canvas