getImageData() returning all zeros

Question

I'm trying to output the pixel values from an image. The image is loading correctly; another answer on here suggested that the browswer is trying to read the pixels before the image is finished loading, but I can see that it's loaded by the time the alert() fires.

function initContext(canvasID, contextType)
{
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext(contextType);
   return context;
}

function loadImage(imageSource, context)
{
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = imageSource;
    return imageObj;
}

function readImage(imageData)
{
    console.log();
    console.log(imageData.data[0]);
}

var context = initContext('canvas','2d');
var imageObj = loadImage('images/color-test.png',context);
var imageData = context.getImageData(0,0,10,10);
alert();
readImage(imageData);

Answer 1

Image.onload() is called asynchronously when the image has been loaded. That can happen after your current code calls context.getImageData().

The following code should work:

function initContext(canvasID, contextType)
{
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext(contextType);
   return context;
}

function loadImage(imageSource, context)
{
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
        var imageData = context.getImageData(0,0,10,10);
        readImage(imageData);
    };
    imageObj.src = imageSource;
    return imageObj;
}

function readImage(imageData)
{
    console.log();
    console.log(imageData.data[0]);
}

var context = initContext('canvas','2d');
var imageObj = loadImage('images/color-test.png',context);

If you want to access the imageData value outside of loadImage(), you have 2 basic choices:

1. Store the imageData in a variable that is declared outside the function. In this case, the value will be unset until your onload() is called, so the outside code would have to test it for reasonableness before calling readImage(imageData).
2. Have the outside code register a callback function, and have your onload() call that function with the imageData value.

Answer 2

It is also possible you are evaluating a portion of an image that is transparent. I had this issue while scanning a PNG.

Answer 3

Share a situation I encountered when I used a loop to request multiple images at the same time and get their pixels respectively. Then I encountered this problem.

//my code looks like this
for(let i = 0; i < urls.length; ++i){
    let img = new Image() // it will be destoryed every loop begin, even if use keyword 'var' insteads of 'let'.  
    img.onload = ()=>{
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      let imgData = ctx.getImageData(0, 0, 1024, 1024) // imgData will be all 0 or some other unexpected result.
    }
    img.src = urls[i]
}

// fixed bug
window.imgs = []
for(let i = 0; i < urls.length; ++i)
    window.imgs[i] = new Image()
for(let i = 0; i < urls.length; ++i){
    let img = window.imgs[i]
    img.onload = ()=>{
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      let imgData = ctx.getImageData(0, 0, 1024, 1024) 
    }
    img.src = urls[i]
}

The reason may be object reference, garbage collection and other problems. I don't know. Because I'm a beginner of js.