El método getImageData() se utiliza para copiar los datos de píxeles del rectángulo especificado en un lienzo.
Hay 4 piezas de información para cada píxel en un objeto ImageData, es decir, los valores RGBA:
- R denota el color rojo. Va de 0 a 255.
- G denota el color verde. Va de 0 a 255.
- B denota el color azul. Va de 0 a 255.
- A denota el canal alfa. También varía de 0 a 255, es decir, 0 es transparente y 255 es completamente visible.
Sintaxis:
context.getImageData(x, y, width, height);
Valores paramétricos:
- x: Se utiliza para especificar la coordenada x (en píxeles) de la esquina superior izquierda desde donde se iniciará la copia.
- y: Se utiliza para especificar la coordenada x (en píxeles) de la esquina superior izquierda desde donde se iniciará la copia.
- ancho: Es el ancho del área rectangular a copiar.
- altura: Es la altura del área rectangular a copiar.
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<h3 style="color:green; "> GeeksforGeeks</h3>
<h3 style="color:green; "> GetImageData() Method</h3>
<canvas id="gfgCanvas"
width="300"
height="300"
style="border:1px solid ;">
</canvas>
<script>
var gfg = document.getElementById("gfgCanvas");
var context = gfg.getContext("2d");
context.fillStyle = "green";
context.fillRect(55, 50, 200, 100);
function putImage() {
// getImageData is used to copy the pixels
var imageData = context.getImageData(55, 50, 200, 100);
context.putImageData(imageData, 55, 170);
}
</script>
<br>
<button onclick="putImage()">GetImageData</button>
</body>
</html>
Salida:
Antes de hacer clic:
Después de hacer clic:
Navegadores compatibles:
- Cromo
- Mozilla Firefox
- Internet Explorer 9.0
- Ópera
- Safari
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