遍历画布像素并找到每个白色像素的 x、y、位置

Posted 2023-03-05

【中文标题】遍历画布像素并找到每个白色像素的 x、y、位置

【英文标题】：Run through canvas pixels and find x, y, position for every white pixel

【发布时间】：2018-04-08 08:37:01

【问题描述】：

我有一个画布，上面画了一些白色的文字。

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

  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 值的结果：

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

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

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

但这似乎不起作用，当我在画布上的任何白色像素附近绘制一个矩形时？

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

【参考方案1】：

当你推送i的值时，你应该将i除以4：

this.possiblePxs.push(i/4);

并且X坐标的提取应该以宽度而不是画布的高度为模：

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

Y 坐标也是如此：

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