HTML canvas putImageData()Método
Manual de referencia de HTML canvas
Ejemplo
El siguiente código copia los datos de píxeles de un rectángulo especificado en el lienzo mediante getImageData() y luego coloca los datos de imagen de vuelta en el lienzo mediante putImageData():
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);
}
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);
}
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método putImageData().
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
El método putImageData() coloca los datos de imagen (del objeto ImageData especificado) de vuelta en el lienzo.
Consejo:ConsultegetImageData()método, que copia los datos de píxeles del rectángulo especificado en el lienzo.
Consejo:ConsultecreateImageData()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); |
|---|
Valores de parámetros
| Parámetros | Descripción |
|---|---|
| imgData | Especifica el objeto ImageData que se va a colocar de vuelta en el lienzo. |
| x | La coordenada x de la esquina superior izquierda del objeto ImageData, en píxeles. |
| y | La coordenada y de la esquina superior izquierda del objeto ImageData, en píxeles. |
| dirtyX | Opcional. El valor horizontal (x), en píxeles, de la posición donde se coloca la imagen en el lienzo. |
| dirtyY | Opcional. El valor vertical (y), en píxeles, de la posición donde se coloca la imagen en el lienzo. |
| dirtyWidth | Opcional. El ancho que se usará para dibujar la imagen en el lienzo. |
| dirtyHeight | Opcional. El alto que se usará para dibujar la imagen en el lienzo. |
Manual de referencia de HTML canvas Otras extensiones