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

Question

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

然后，我将链接以将每个点转换为逗号分隔的数组或列表，以便于检查。

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

概念的类似问题证明

Answer 1

这是你的开始计划

对于每个垃圾箱：

1. 选择独特的颜色，

2. 在垃圾箱的底部正面、顶部正面和顶部背面贴上 3 条胶带。 此示例图像在适当的位置有绿色胶带。

3. 拍一组垃圾桶的照片，

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

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

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

7. 你有定义这个垃圾箱的坐标，

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

9. 再次检查您在图像中获取的像素并使用context.isPointInPath来确定哪些像素在 bin 路径内。

10. 为组中的每个垃圾箱重复使用不同的独特颜色。