Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

 

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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo Si
Soporte completo Si
Soporte completo 5
Notas
Notas 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 SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo Si
Soporte completo Si
Soporte completo 5
Notas
Notas 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 SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

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

Véase también

Etiquetas y colaboradores del documento

Colaboradores en esta página: LEUGIM99
Última actualización por: LEUGIM99,