CanvasRenderingContext2D.getImageData()

This translation is incomplete. Please help translate this article from English

 

El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.

Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.

 

Sintaxis

ImageData ctx.getImageData(sx, sy, sw, sh);

Parámetros

sx
La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.
sy
La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.
sw
El ancho del rectángulo del que se extraerán los datos de la imagen.
sh
La altura del rectángulo del que se extraerán los datos de la imagen.

Valor de retorno

An ImageData object containing the image data for the given rectangle of the canvas.

Errores cometidos

IndexSizeError
Lanzado si cualquiera de los argumentos de anchura o altura es cero.

Ejemplos

Usando el método getImageData

Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte Manipulación de píxeles con Canvas y el objeto ImageData.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de 'CanvasRenderingContext2D.getImageData' en esta especificación.
Living Standard  

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
getImageDataChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 2
Notas
Soporte completo 2
Notas
Notas Since Firefox 5, getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 4WebView Android Soporte completo 1Chrome Android Soporte completo 18Firefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Since Firefox 5, getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.2Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.

Véase también