Error Uncaught Domexception:

Question

Uncaught Domexception: Failed to execute 'getImageData' on 'Canvasrenderingcontext2d': The source width is 0.

But I’m doing the same getting the width of canvas, which is 664px;

    <canvas id="viewport" width="664px" height="664px"></canvas>
<script>

let canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();


   console.log("aqui "+imageData.data)
   numPixels = imageData.width * imageData.height;

  let count = 0;
  for ( let i = 0; i < numPixels; i++ ) {
      let r = pixels[ i * 4 ],
          g = pixels[ i * 4 + 1 ],
          b = pixels[ i * 4 + 2 ];

        if(r == 255 && g == 0 && b == 0){
          count++;
        }
  }

  alert("O numero de pixels vermelhor é :"+count);
}


</script>

Answer 1

The problem is that you are calling the function make_base() before the image is loaded.

As the image loading process is asynchronous, you must call this function, only after full loading, for example:

loadPicture();

function loadPicture() {
    img = new Image();
    img.src = 'img/img.png';

    img.onload = function () {
        context.drawImage( img, 0, 0 );

        make_base();
    }
};