Ejemplo
El código siguiente copia los datos de píxeles para un rectángulo especificado en el lienzo con getImageData() , y luego poner los datos de la imagen de nuevo en la lona con 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);
} Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| putImageData() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
El putImageData() método devuelve los datos de la imagen (de un objeto especificado ImageData) de nuevo en el lienzo.
Consejo: Lea acerca de la getImageData() método que copia los datos de los píxeles de un rectángulo especificado en un lienzo.
Consejo: Lea acerca de la createImageData() método que crea un nuevo objeto ImageData en blanco.
sintaxis JavaScript
| la sintaxis de JavaScript: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
Los valores de los parámetros
| Parámetro | Descripción |
|---|---|
| imgData | Especifica el objeto ImageData para volver a poner en el lienzo |
| x | La coordenada x, en píxeles, de la esquina superior izquierda del objeto ImageData |
| y | La coordenada y, en píxeles, de la esquina superior izquierda del objeto ImageData |
| dirtyX | Opcional. El valor horizontal (x), en píxeles, dónde colocar la imagen en el lienzo |
| dirtyY | Opcional. El valor vertical (y), en píxeles, dónde colocar la imagen en el lienzo |
| dirtyWidth | Opcional. La anchura de usar para dibujar la imagen en el lienzo |
| dirtyHeight | Opcional. La altura a utilizar para dibujar la imagen en el lienzo |