Getting pixel data from Canvas

Ionic Framework ionic-v3
1

I would like to get pixel RGBA data from Canvas element.
I am successfuly taking pic with camera in base64Image string, then I am passing this string to canvas to get RGBA values.
Unfortunatelly i am getting all “0” instead other values.
Any ide whats wrong with my code?

home.ts

  var canvas = <HTMLCanvasElement> document.getElementById('imageCanvas');
  var image = new Image();
  if (canvas.getContext) {
    var imgX = 312;
    var imgY = 408;
    var imgWidth = 60;
    var imgHeight = 296;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(312, 408, 60, 296);

    image.onload = function(){
      ctx.drawImage(image, 312,408 , 60,304 , 0,0 , 60,296);
    };
    image.src = this.base64Image;
    var imageData = new ImageData(imgWidth, imgHeight);

    imageData = ctx.getImageData(312, 408, imgWidth, imgHeight);
    var data = imageData.data;
    console.log('data: '+ data); //<- here i get all "0"
  }
  this.myArray[30] = data[30];
  console.log('DEV:2: middle column myArray: ' + this.myArray[30]);
}

home.html

 <canvas style="border:1px solid #d3d3d3;" id="imageCanvas" width="60" height="296"></canvas>
2

…anyone have any idea why I am not getting any values except “0” in var data=imageData.data?

3

Shouldn’t you try to obtain your pixel data AFTER the image was loaded?

4

Try something like this:

  var canvas = <HTMLCanvasElement> document.getElementById('imageCanvas');
  var image = new Image();
  if (canvas.getContext) {
    var imgX = 312;
    var imgY = 408;
    var imgWidth = 60;
    var imgHeight = 296;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(312, 408, 60, 296);

    image.onload = () => {
      ctx.drawImage(image, 312,408 , 60,304 , 0,0 , 60,296);
      // now that the image was drawn:
      var imageData = new ImageData(imgWidth, imgHeight);
      imageData = ctx.getImageData(312, 408, imgWidth, imgHeight);
      var data = imageData.data;
      console.log('data: '+ data); //<- here i get all "0"
    };
    image.src = this.base64Image;
  }
  this.myArray[30] = data[30];
  console.log('DEV:2: middle column myArray: ' + this.myArray[30]);
}