0

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Mas estou fazendo o mesmo receber a width de canvas, que é 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>

1 Resposta 1

0

O problema é que você está chamando a função make_base() antes da imagem ser carregada.

Como o processo de carregamento da imagem é assíncrono, você deve chamar essa função, somente após o carregamento completo, por exemplo:

loadPicture();

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

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

        make_base();
    }
};
8
  • fiz isso que você falou, tipo no firefox não aparece nenhum erro, no chrome dá erro e nem faz a contagem de pixels que estranho
    – tatah
    27/03/2018 às 12:43
  • @tatah A contagem não está sendo realizada pois a condição r == 255 && g == 0 && b == 0 não é verdadeira. Você pode adicionar console.log( r == 255 && g == 0 && b == 0 ) e verificar no console do navegador. 27/03/2018 às 12:56
  • Lembrando que há vários tons de vermelho. Inclusive se o tom r: 255, g: 255, b: 254 for encontrado, ele não será computado. Utilize um editor de foto e crie uma imagem com a cor (255,0,0), dessa forma não haverá variações. 27/03/2018 às 13:04
  • meu console, fica aparecendo esse erro DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    – tatah
    27/03/2018 às 13:40
  • @tatah Isso acontece quando você utiliza uma imagem externa, por medida de segurança, o navegador bloqueia. 27/03/2018 às 13:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .