确定Javascript中黑白像素之间的距离

Question

我打算在这个项目中使用JavaScript（但我愿意使用其他东西）。我在javascript中加载图像，当我在图像上放置一个点时，我想计算从放置点到第一个黑色或灰色像素的x和y距离。

所以我将红点放在图像上，然后我想向用户显示从所选点到第一个黑色像素的x，y距离。距离可以是像素（我不介意）。这有可能，任何人都可以帮助我吗？

谢谢！

Answer 1

您可以使用drawImage使用MDN example.将图片绘制到画布，然后使用getImageData提取像素数据，然后返回包含width的对象，height和data属性。

data属性是一系列rgba（红色，绿色，蓝色，alpha）值，每行像素从左到右运行。值为0-255。对于透明度，0表示像素是透明的，255表示不透明。

数组如下所示：

    ,--- first pixel (top left)
    |       ,-- second pixel
____|___ ___|___    _______,--- last pixel (bottom right)
[r,g,b,a,r,g,b,a...,r,g,b,a]

考虑到画布上下文的宽度和高度，你可以使用一些不那么复杂的数学来获得（x，y）处的像素，或者只是运行一些嵌套循环，你可以找到任何给定的像素（x ，y）的

至于找到最近的黑色像素，我建议你从（x，y）的像素开始，增加/减少x，y或两者来获得周围的像素。我能想到的最快的方法是在一个方向上运行像素，直到达到你想要的像素为止。这样做是为了其他方向。然后比较值。

在笛卡尔平面中将相邻像素与“红色像素”相距1个像素的示例。如果您只想要水平和垂直，则可以省略对角线。

/*(x-1,y+1)*/ ( x ,y+1) /*(x+1,y+1)*/
  (x-1, y )   ( x , y )   (x+1, y )
/*(x-1,y-1)*/ ( x ,y-1) /*(x+1,y-1)*/

对于距离，给定“红色像素”的（x，y）和最近的黑色像素（x，y），可以使用one of many distance formulas。

Answer 2

另一种方法是再次使用getImageData函数作为梦想家建议的@Joseph，但不是在指示中搜索你可以做的是以下内容：

// the context to the canvas which holds your map
var ctx {...};

var point = {x:x, y:y};
// this gets a 3 by 3 bitmap data from your canvas with the centre being your point
var search = ctx.getImageData(x - 1, y - 1, 3, 3);

var match = false;
while(!match)
{
    // iterate over the search array looking for a black or grey pixel
    // and add the co ordinates of the matches into another array

    // if we found matches in this loop, calculate the shortest length match
    // and then break out of the loop

    // otherwise get a bigger sample data to search through and do this loop again
    // you could optimise this by skipping the pixels you looked through
    // in the previous loop
}