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

Question

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

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

谢谢！

Answer 1

另一种方法是按照@Joseph the Dreamer 的建议再次使用该getImageData功能，但您可以执行以下操作而不是搜索方向：

// 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
}

Answer 2

drawImage您可以使用此MDN 示例中的方法将图像绘制到画布上。然后使用 提取像素数据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)，您可以使用许多距离公式之一。