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

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

本文关键字：像素 白色 方法 问题 什么 计算 种计 布元素 元素      更新时间：2024-01-28

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

<!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>

画布最初只是黑色透明像素，而像素绘制使用的是黑色不透明像素，因此当您计算每个非白色像素时，在这种情况下，所有像素都将被计算在内，这使得结果正确。

要修复此问题，需要先用白色填充整个画布。你现在看到的白色是画布的背景：

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

Fiddle

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

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

Fiddle 2

相关文章：