javascript - 遍历 Canvas 像素并找到每个白色像素的 x、y 和位置

Question

我有一个 Canvas ，我在上面画了一些白色文本。

然后我获取 Canvas 图像数据并检查每个像素是否为白色:

  var pixelData = 
  this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height);


    for(var i = 0; i < pixelData.data.length;i+=4) //run through pixels
        if(pixelData.data[i] == 255 && pixelData.data[i+1] == 255 && pixelData.data[i+2] == 255) //is white?
            this.possiblePxs.push(i);

我在某处读到“getImageData”返回一个一维数组，其中第一个元素是第一个像素的红色值，第二个是蓝色，第三个是绿色，第四个是 alpha

因此我每次迭代将循环递增 4。

如果找到白色像素，我将其存储在“possiblePxs”数组中。

稍后在我的代码中我需要选择这些像素之一并在其位置绘制一些东西 所以首先我在 0 和“possiblePxs”的长度之间创建一个新的随机索引:

var randomPx = Math.floor(Math.random()*this.possiblePxs.length)

然后，为了获得 x 位置，我只取 possiblePxs 在该随机索引模 Canvas 高度的值的结果:

var randomX = this.possiblePxs[randomPx] % this.ctx.canvas.height

然后我可以通过从随机索引处的 possiblePxs 的值中减去 randomX 并再次除以 Canvas 的高度来获得 y 位置:

var randomY = (this.possiblePxs[randomPx] - randomX ) / this.ctx.canvas.height;

然而，这似乎不起作用，当我然后在它远离 Canvas 上任何白色像素的位置绘制一个矩形时？

我一定搞砸了循环或查找 x、y 部分的数学运算。我希望你们中的某个人可以告诉我我做错了什么以及如何解决 :)

Answer 1

当你压入i的值时，你应该将i除以4:

this.possiblePxs.push(i/4);

并且 X 坐标的提取应该以宽度而不是 Canvas 的高度为模:

var randomX = this.possiblePxs[randomPx] % this.ctx.canvas.width;

Y 坐标类似:

var randomY = (this.possiblePxs[randomPx] - randomX ) / this.ctx.canvas.width;