獲取圖像內預定義區域的所有 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. 為組中的每個垃圾箱重復使用不同的獨特顏色。