使用带有 NodeJS 的图像像素数组跟踪边界
Trace boundary using an image pixel array with NodeJS
我有这个图像,除了中间有一个白色物体(它可以是任何东西,但它总是完全白色的)是完全黑色的。我想用nodeJs做的是跟踪图像中对象的边界(我想找到黑色旁边的所有白点)(性能是关键!
使用 pngjs,我可以读取一个图像,该图像给我一个数组,其中每个像素都有 4 个值 (RGBA)。它是一个一维数组。因此,假设图像是 1000 x 1000 像素,它给了我一个 1000 x 1000 x 4 = 4000000 个条目的数组。
下面的表达式将x
和y
转换为数组索引
var idx = (1000 * y + x) << 2;
data[idx] = 243;
data[idx + 1] = 16;
data[idx + 2] = 16;
无论如何,我可以遍历整个数组并记录黑色变为白色的点,但正如我所说,性能非常重要。我可以想象存在某种智能迭代搜索算法,可以以某种方式遵循边界:)
也许有人知道一个可以提供帮助的库,或者关于如何做到这一点的文章也会很棒!!
查看像Freeman Code这样的链码。您需要 1 个等值线点才能开始。因此,只需遍历您的线条,直到您击中您的对象。然后你绕着你的物体走,直到你到达你的起点。您将获得一个代码,描述您每一步的方向。此代码可用于计算各种对象特征或仅绘制对象的轮廓。
顺便说一句,如果您的obect始终是白色的,并且您的背景始终是黑色的,则不必处理4个通道。红色、绿色或蓝色通道包含相同的信息。只需使用其中任何一个。
相关文章:
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使线条的边缘像素保持半透明
- 画布:逐像素绘制图像并请求动画帧计时
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- HTML 画布像素数据类型
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 鼠标悬停时显示像素数
- HTML 缩放元素,其尺寸以百分比定义,就像以像素定义一样
- 使用带有 NodeJS 的图像像素数组跟踪边界
- 获取动画 jQuery Java 脚本中行进的像素数
- 无法将图像数据 URI 转换为像素数据数组
- 将图像像素数据转换为坐标数组
- 如何指定每一步滚动移动的像素数
- 动画定义像素数的问题
- 画布像素数据的跨浏览器规范
- 使用putImageData从画布上的像素数组绘制图像
- 如何使滚动To+像素数而不是依赖于锚点
- 如何将画布像素数组传递给C++代码并将其保存为 jpeg