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 el lienzo 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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
El putImageData() método pone los datos de imagen (from a specified ImageData object) de nuevo en la lona.
Tip: Lea sobre el getImageData() método que copia los datos de los píxeles de un rectángulo especificado en un lienzo.
Tip: Lea sobre el 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. La horizontal (x) valor, en píxeles, dónde colocar la imagen en el lienzo |
| dirtyY | Opcional. La verticales (y) valor, 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 |
<Objeto Canvas