javascript - 使用 Canvas 和 JavaScript 进行多边形表示的图像采样算法?

标签 javascript html image algorithm canvas

首先我不习惯处理图像,所以如果我的措辞有问题,请原谅。

我希望将一张图像放到 HTML5 Canvas 上,对其进行采样,减少采样,然后主要使用三 Angular 形和其他一些多边形创建图像的多边形表示,并将该图像绘制到 Canvas 。

但我不知道从哪里开始使用算法来做到这一点。这种算法需要什么样的伪代码?

这张图片可以更好地理解最终结果:

最佳答案

我会做以下事情:

  1. 创建一个由随机放置的点组成的区域。
  2. 创建 Voronoi diagram从点点滴滴。
  3. 根据颜色采样为每个单元格着色。
    • 你只是选择点的颜色吗?对单元格内的所有颜色进行采样并取平均值?按单元格中心加权平均值?每个都会产生不同但可能有趣的结果。

如果结果需要三 Angular 形而不是多边形,则创建 Delaunay triangulation 而不是 Voronoi 图. GitHub 有 15 JavaScript libraries for this , 但我没有尝试过任何能够特别推荐的。

关于javascript - 使用 Canvas 和 JavaScript 进行多边形表示的图像采样算法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15772626/

相关文章:

html - 环绕文本将图像向上推

javascript - 如何在 Reactjs 中按升序或降序对数据进行排序?

javascript - html javascript在div中获取长度名称

javascript - 索引页面与 AngularJS 应用程序的其余部分分开?

javascript - 点击元素跨容器遍历

c# - 使用 wpf 存储在外部 dll 中的引用图像

html - 背景图像顶部的列

javascript - 为什么我的窗口调整大小事件监听器不起作用?使用 Three.js 和 Vuetify.js

Javascript 更改 css top 属性

c# - 在 Web 应用程序的服务器上存储图像的更好方法是什么?