El método putImageData() se usa para devolver los datos de la imagen al lienzo desde un objeto ImageData específico.
Sintaxis:
context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
Valores paramétricos:
- imgData: se utiliza para especificar el objeto ImageData para volver a colocarlo en el lienzo.
- x: es la coordenada x de la esquina superior izquierda del objeto ImageData. Está en píxeles.
- y: es la coordenada y de la esquina superior izquierda del objeto ImageData. Está en píxeles.
- dirtyX: es el valor horizontal (x) que indica dónde colocar la imagen en el lienzo. Es en píxeles y opcional.
- dirtyY: es el valor vertical (y) que indica dónde colocar la imagen en el lienzo. Es en píxeles y opcional.
- dirtyWidth: Es el ancho que se utiliza para dibujar la imagen en el lienzo. También es opcional.
- dirtyHeight: Es la altura que se utiliza para dibujar la imagen en el lienzo. También es opcional.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2 style="color:green;">PutImageData() Method</h2>
<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()">PutImageData</button>
</center>
</body>
</html>
Salida:
Antes de hacer clic:
Después de hacer clic:
Navegadores compatibles: los navegadores compatibles con HTML canvas putImageData() Method se enumeran a continuación:
- 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