使用Canvas和JavaScript進行多邊形表示的圖像采樣算法？

Question

首先，我不習慣處理圖像，所以如果我的措辭不對，請原諒。

我希望拍攝放在HTML5畫布上的圖像，對其進行采樣，減少采樣，然后使用主要使用其他幾個多邊形的三角形創建圖像的多邊形表示，並將該圖像繪制到畫布上。

但我不知道從哪個算法開始這樣做。 這種算法需要什么樣的偽代碼？

此圖像可以更好地理解最終結果：

Answer 1

我會做以下事情：

1. 創建一個隨機放置點的字段。
2. 從點創建Voronoi圖 。
   • 這是我過去用過的一個很好的JavaScript庫： https ： //github.com/gorhill/Javascript-Voronoi
3. 根據顏色采樣為每個單元着色。
   • 你只是選擇點上的顏色？ 對單元格內的所有顏色進行采樣並取平均值？ 通過細胞中心的平均重量？ 每個都會產生不同但可能有趣的結果。

如果結果需要是三角形而不是多邊形，則代替Voronoi圖創建Delaunay三角剖分 。 GitHub有15個JavaScript庫 ，但我沒有嘗試任何能夠專門推薦一個。

Answer 2

好吧，這有點間接，但是這里......

這是一個SVG的插件，可以將圖像轉換為有針對性的藝術： https ： //github.com/gsmith85/SeuratJS/blob/master/seurat.js

這是有趣的部分。 在引擎蓋下，它使用畫布進行處理！

這些例子顯示了由“點”和“正方形”組成的圖像。

也許您可以修改代碼來生成三角形 - 甚至只是沿對角線切割正方形以創建三角形。