logo标签列表

在HTML5画布上检查像素是否为黑色

javascripthtmlcanvas
3

我试图在画布上找出一个像素是否是黑色的

    var check = function(player,keyPressed) {
//series of ifs to determine what pixel to check. 
    }

如果像素为false，我需要返回true或false，我尝试了getImageData，但是我无法弄清楚如何正确使用它。

请查看以下问题：https://dev59.com/M2w15IYBdhLWcg3wQpbS https://dev59.com/SHRB5IYBdhLWcg3wSVm1 - ADreNaLiNe-DJ
1
getImageData是像素的数组，每个像素占用4个字节（r，g，b，a）。您可以简单地循环遍历其像素，或者从x，y坐标中识别出需要的像素，并查询其前三个值是否为0。 - ManoDestra
1个回答
6
var canvas= document.getElementById('myCanv');
var pixelData = canvas.getContext('2d').getImageData(event.clientX, event.clientY, 1, 1).data;

这就是全部了！当然，前提是您拥有：
   <canvas id="myCanv"></canvas>

FIDDLE

接着：

function isBlack(dataPixel){
   if(dataPixel[0]==dataPixel[1] && dataPixel[1]==dataPixel[2] && dataPixel[2]===0 ){
      return true
   }
}

http://jsfiddle.net/abdennour/4kdLfooj/11/

1
那么我只需要检查 pixelData 数组中的值是否适用于黑色颜色？ - MickDom
3
当然，他仍需审查返回的数据以确保其是黑色的。 - ManoDestra
如果您在画布上遇到鼠标坐标的问题，这是我的答案：https://dev59.com/ZXVD5IYBdhLWcg3wNIrc#27204937 - Tomáš Zato
1
顺便问一下，为什么不直接使用 dataPixel[0]+dataPixel[1]+dataPixel[2]==0？ - Tomáš Zato
2
我喜欢@TomášZato的简化，但你还必须检查alpha元素（dataPixel [3]）。如果alpha为零，则该像素是透明的--而不是黑色。;-) dataPixel [0] + dataPixel [1] + dataPixel [2] + dataPixel [3] == 0 - markE
在比较颜色是否为纯黑色（0, 0, 0）时要小心。有时由于压缩、变换或画布渲染像素的特殊性质，颜色边界处的像素可能会变得不纯，因此 RGB 值可能是 (2, 11, 7) 这样的值，而不是 (0, 0, 0)。我建议将比较范围设定为 +-15。这适用于所有颜色，而不仅仅是黑色。 - N7D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接