0

I made this code to cycle through every pixel in an image and output its RGBA value to the console. Why doesn't it work as intended? I seem to be getting all [0,0,0,0]s for PixelData. I tried several pieces of code from stackoverflow.com but they didn't help. My ultimate goal is to compare these colors to a list of other colors and pick the closest one for each pixel, but I should be able to do that alone once I get this part answered.

<!doctype html>
<html>
<head>
<img id="myImage" src="img.png" width="64px" height="64px"></img>
<script>
var img = document.getElementById('myImage');
var mycanvas = document.createElement('canvas');
mycanvas.width = img.width;
mycanvas.height = img.height;
var context = mycanvas.getContext('2d');
context.drawImage(img, 0, 0, img.width, img.height);
for(var x=1;x<=16;x++){
for(var y=1;y<=16;y++){
var pixelData = context.getImageData(x, y, 1, 1).data;
console.log("x="+x.toString()+" y="+y.toString()+" pD="+pixelData.toString()+" ");
}}
</script></head>
<body></body>
</html>
Hello Goodbye
  • 134
  • 2
  • 10

1 Answers1

2

You might not be giving your image enough time to load and render. Try using img.onload like this:

var img = document.getElementById('myImage');

img.onload = function() {
  var mycanvas = document.createElement('canvas');
  mycanvas.width = img.width;
  mycanvas.height = img.height;
  var context = mycanvas.getContext('2d');
  context.drawImage(img, 0, 0, img.width, img.height);
  for(var x=1;x<=16;x++){
    for(var y=1;y<=16;y++){
      var pixelData = context.getImageData(x, y, 1, 1).data;
      console.log("x="+x.toString()+" y="+y.toString()+" pD="+pixelData.toString()+" ");
    }
  }
}

Oh, and one more thing... Move your <img...> tag out of the head section of your HTML and into the body. I'm not sure an image will even load if it's in the head section. If you do this either your script will have to follow the image, or you'll have to wrap your script in a function that's called when your document finishes loading, e.g. <body onload="init()">.

Update:

I found this post about putting an img in your head section. It sounds like you're likely to get away with it, but you shouldn't count on it: Will an html image tag execute in the head tag

kshetline
  • 12,547
  • 4
  • 37
  • 73
  • It worked but now I get the error that the console is tainted. Once again I tried a lot of options that I found on this website and none of them worked. – Hello Goodbye Mar 26 '18 at 00:01
  • I'm guessing you mean that the canvas, not the console, is tainted. Are you using images from a different server than the server that hosts your web page? (Causing a CORS issue?) – kshetline Mar 26 '18 at 00:07
  • You're right, it's the canvas. The thing is that it's not a web page, it's a file. The picture is in the same directory as the file, as you can see from the code. – Hello Goodbye Mar 26 '18 at 10:16
  • Never mind, I put this on GitHub and it worked. Apparently CORS doesn't support file://, only http:// and https://. That's really annoying. – Hello Goodbye Mar 27 '18 at 21:26