这种计算 canvas 元素中非白色像素的方法有什么问题？

Question

我在玩 canvas。我写了这个小片段，我可以在 canvas 中画一些东西，按运行并让它计算像素数。只有计数不起作用。具体来说，context.getImageData(0,0,canvas.width,canvas.height).data的每一个元素都是0。我看到之前的一个post也有类似的问题，但是那样的话，这是因为加载图像之前的代码运行。在这种情况下，我已经渲染了图像并且可以在屏幕上看到它。我将不胜感激任何帮助。

<!DOCTYPE html>
<html>
<body>

<div>
<canvas id="myCanvas" width="100" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<button id="runButton">Run</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');


      function drawPixel(x,y,r,g,b)
      {
        var id = context.createImageData(1,1);
       var d  = id.data;
       d[0]   = r;
       d[1]   = g;
       d[2]   = b;
       d[3]   = 255;
       context.putImageData( id, x, y );  
      } 

        var clicking = false;



    $(document).mouseup(function(){
        clicking = false;
    })

      canvas.addEventListener('mousedown', function(evt) {
        clicking = true;
        var p = getMousePos(canvas, evt);
        drawPixel(p.x,p.y,0,0,0);
      }, false);

      canvas.addEventListener('mousemove', function(evt) {
        if(clicking == false) return;
        var p = getMousePos(canvas, evt);
        drawPixel(p.x,p.y,0,0,0);
      }, false);

      $("#runButton").click(countPixels);

      function countPixels()
      {
        var nAlive = 0;
        var p = context.getImageData(0,0,canvas.width,canvas.height).data;
        for (var y = 0, i =0 ; y < canvas.height; y++)
            for (var x = 0; x < canvas.width; x++, i+=4)
            {
                if (p[i] != 255 || p[i + 1] != 255 || p[i + 2] != 255) //Not white
                {
                    nAlive++;
                }
            }

        alert(nAlive);
      }

</script>

</body>
</html>

Answer 1

canvas最初只是黑色透明像素，而像素绘制使用的是黑色非透明像素，所以当你计算每个非白色像素时，在这种情况下都会被计算在内使结果正确。

要修复，您需要先用白色填充整个 canvas。你现在看到的白色就是canvas:

的背景

context.fillStyle ="#fff";
context.fillRect(0, 0, canvas.width, canvas.height);

Fiddle

如果您不想先填充，您可以选择使用像素的索引 3 来计算非透明像素：

if (p[i+3]) //a pixel
{
   nAlive++;
}

Fiddle 2

这种计算 canvas 元素中非白色像素的方法有什么问题？

What is wrong with this method for counting non-white pixels in a canvas element?

html

javascript

canvas