0
133
Views¿Por qué getImageData solo proporciona datos de salida de los primeros 300 píxeles?
HTML:
El div es para las primeras cuatro líneas de código JavaScript
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="./colorful_cat.png" id="img"> <script src="script.js"></script> </body> </html> JS:
Primero obtengo el ancho y el alto de la imagen que he elegido a través del div.
Luego, en la función, creo una nueva variable de imagen y la vinculo a la fuente.
Después de eso, creo un lienzo y dibujo la imagen en el lienzo.
Finalmente, solicito los datos de color del lienzo de arriba a la izquierda a abajo a la derecha.
var myImg = document.getElementById('img'); var realWidth = myImg.naturalWidth; var realHeight = myImg.naturalHeight; console.log(realWidth, realHeight); function get_rgba_data() { var img = new Image(); img.src = "colorful_cat.png"; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); return context.getImageData(0, 0, realWidth, realHeight).data; } var imageInfo = get_rgba_data(); console.log("imageInfo", imageInfo); CSS:
No existe (todavía) en este proyecto.
Salida de consola:
Emite solo ceros después de imageInfo[1199] (300*4 para rgba) 
Por cierto, este es el enlace para la imagen de prueba que estoy usando:
https://www.google.com/url?sa=i&url=https%3A%2F%2Fdiamondpaintingplanet.com%2Fproducts%2Froefpakket-kleurrijke-leeuw&psig=AOvVaw3ipP5DjINR25o2P0thcLPV&ust=1634563635475000&source=images&cdFAA=vMCHAAaDurMCQHAAaurf&ved=0CAsQjRAAx