获取图像中预定义区域的所有x，y坐标

Question

请提供代码，以便在图像中创建红色轮廓区域的叠加层。然后，代码应返回包含在所述区域内的每个x和y坐标。

然后我会链接到将每个点转换为逗号分隔的数组或列表，可以轻松检查。

使用画布HTML5元素在这里是理想的，这样我就可以为3个额外的图像重现这个。

Similar question proof of Concept

Answer 1

这是您的首发计划

对于每个垃圾箱：

1. 选择一种独特的颜色，

2. 在底部前面，前面和前面放置3条胶带。垃圾箱的顶部。此示例图像在适当的位置具有绿色磁带。



1. 拍摄一组箱子，

2. 将图片绘制到画布上，

3. 使用context.getImageData获取画布上的所有像素，

4. 测试垂直条带中的像素，直到找到所有3个胶带的4个角落，

5. 您有定义此bin的坐标

6. 创建连接坐标的画布路径

7. 再次浏览您在图片中提取的像素，并使用context.isPointInPath确定哪些像素位于bin路径中。

8. 对组中的每个bin重复使用不同的唯一颜色。