Para obtener el píxel de cualquier parte específica del lienzo HTML, puede usar el método getImageData() del lienzo HTML . El método getImageData() generalmente devuelve un objeto ImageData que contiene la información de píxeles del objeto especificado en el lienzo HTML. Ejemplo 1: este ejemplo mostrará cada valor de píxel del cuadro cuadrado. El color de los cuadros es un degradado lineal, por lo que los píxeles cambiarán el valor del color que cambiará simultáneamente.
- Programa:
html
<!DOCTYPE html> <html> <head> <title> Getting pixel information from html canvas. </title> </head> <body> <center> <h1 style="color:green;"> GeeksfoGeeks </h1> <h3> Getting pixel information from html canvas </h3> <canvas id="GFG" width="190" height="100" style="border:1px solid black;"> </canvas> <script> /* Retrieve canvas with id GFG, and store it in a */ var a = document.getElementById("GFG"); /* Retrieve a 2D context for the canvas */ var gfg = a.getContext("2d"); var geeks = gfg.createLinearGradient(0, 0, 200, 0); geeks.addColorStop(0, "green"); geeks.addColorStop(1, "yellow"); gfg.fillStyle = geeks; gfg.fillRect(20, 20, 150, 150); /* Define a function find(), that prints the array containing pixel information returned by the getImageData() method */ function find() { /* Store the pixel information of the canvas at (x,y) coordinate of (20,20) */ var ImageData = gfg.getImageData(20, 20, 60, 60); /* Print the array on console */ console.log(ImageData); } find(); </script> </center> </body> </html>
- Producción:
Ejemplo 2: Código para obtener información de color/alfa del primer píxel. Después de ejecutar el código, puede verificar cambiando el color de la línea 36.
html
<!DOCTYPE html> <html> <head> <title> Getting pixel information from html canvas. </title> </head> <body> <center> <h1 style="color:green;"> GeeksfoGeeks </h1> <h3> Getting pixel information from html canvas </h3> <canvas id="GFG" width="100" height="100" style="border:1px solid black;"> </canvas> <script> // Retrieve canvas with id GFG, // and store it in a var a = document.getElementById("GFG"); // Retrieve a 2D context for the canvas var geeks = a.getContext("2d"); // Set the filling style to red colour geeks.fillStyle = "blue"; /* Move the cursor to the (x,y) coordinate of (20,20) and then create a rectangle of height and width 60 */ geeks.fillRect(20, 20, 60, 60); /* Define a function find(), that prints the colour/alpha information of the first pixel returned by getImageData() method */ function find() { var ImageData = geeks.getImageData(20, 20, 60, 60); /* Stores the red color information of the first pixel */ red = ImageData.data[0]; /* Stores the green color information of the first pixel */ green = ImageData.data[1]; /* Stores the blue color information of the first pixel */ blue = ImageData.data[2]; /* Stores the opacity of the first pixel */ alpha = ImageData.data[3]; console.log(red); console.log(green); console.log(blue); console.log(alpha); } find(); </script> </center> </body> </html>
Producción: