How to get Canvas image data?

Question

am trying to read data of image but its giving me blank array every time.

what i did as loaded image black and white color and when i check console log for array output it always come blank

// function to convert rgb to hex
    function rgbToHex(r, g, b) {
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }
// load image to canvas 
     function Load_mg(can_id,mg_src) {
        var ctx = document.getElementById(can_id);
        if (ctx.getContext) {
            ctx = ctx.getContext('2d');
            var img1 = new Image();
            img1.onload = function () {
                ctx.drawImage(img1, 0, 0);
            };
            img1.src = mg_src;
        }
    var can_ida = document.getElementById(can_id);  
    //var imgData = ctx.getImageData(0,0,can_ida.width,can_ida.height);
     var imgData = ctx.getImageData(10, 10, 50, 50);
    var data = imgData.data;    

    for(var i=0; i<data.length; i+=4) {
      var red = data[i];
      var green = data[i+1];
      var blue = data[i+2];
      var alpha = data[i+3];
      if(red != 0){
      console.log('some color found');
      break;
      }
      var hex = "#" + ("000000" + rgbToHex(red,green, blue)).slice(-6);
    //  console.log('can_data hex '+hex+' Alpha '+alpha);
      //if(i === 1000)break;  
    }

    console.log(data);

    } // function end point
    Load_mg('test1','box_1.png');

Fiddle : Jsbin

in fiddle i loaded image through base64 image data

You are calling getImageData before you've drawn the image, this happens in the image's `onload` event handler (asynchronously). You have to call getImageData inside this event handler too. — Kaiido, Jan 30 '17 at 04:56
Possible duplicate of [CanvasContext2D drawImage() issue \[onload and CORS\]](http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors) — Kaiido, Jan 30 '17 at 04:57

score 1 · Accepted Answer · answered Jan 30 '17 at 06:48

To fix you just move the get pixel code into the onload event.

// function to convert rgb to hex
function rgbToHex(r, g, b) {
    return "#" + (r < 10 ? "0" : "") + r.toString(16) +
           (g < 10 ? "0" : "") + g.toString(16) +
           (b < 10 ? "0" : "") + b.toString(16);
}
// load image to canvas
function Load_mg(can_id, mg_src) {
    var ctx = document.getElementById(can_id);
    if (ctx.getContext) {
        ctx = ctx.getContext('2d');
        var img1 = new Image();
        img1.onload = function () {
            ctx.drawImage(this, 0, 0);
            var can_ida = document.getElementById(can_id);
            //var imgData = ctx.getImageData(0,0,can_ida.width,can_ida.height);
            var imgData = ctx.getImageData(10, 10, 50, 50);
            var data = imgData.data;

            for (var i = 0; i < data.length; i += 4) {
                var red = data[i];
                var green = data[i + 1];
                var blue = data[i + 2];
                var alpha = data[i + 3];
                if (red != 0) {
                    console.log('some color found');
                    break;
                }
                var hex = rgbToHex(red, green, blue);
            }
        };
        img1.src = mg_src;
    }

}
Load_mg('test1', 'box_1.png');

How to get Canvas image data?

1 Answers1