La propiedad de datos ImageData se usa para devolver un objeto que contiene datos de imagen del objeto ImageData especificado.
Cada píxel en un objeto ImageData contiene cuatro piezas de información, es decir, los valores RGBA:
- R denota el color rojo (0-255)
- G denota el color verde (0-255)
- B denota el color azul (0-255)
- A denota el canal alfa (0-255; 0 es completamente transparente y 255 es completamente visible)
Una array que se almacena en la propiedad de datos del objeto ImageData almacena la información del color/alfa.
Sintaxis:
imageData.data;
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<h3 style="color:green">
GeeksforGeeks
</h3>
<h3>HTML canvas ImageData data property</h3>
<canvas id="myCanvas"
width="200"
height="200"
style="border:2px solid ;">
</canvas>
<p id=g eeks></p>
<script>
var can = document.getElementById("myCanvas");
var gfg = can.getContext("2d");
var imgData = gfg.createImageData(150, 100);
var i;
for (i = 0; i < imgData.data.length; i += 3) {
imgData.data[i + 0] = 100;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
}
gfg.putImageData(imgData, 10, 10);
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con HTML canvas ImageData data Property se enumeran a continuación:
- Cromo
- Internet Explorer 9.0
- Safari
- Firefox
- Ópera
Publicación traducida automáticamente
Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA