[英]Algorithm for Image Sampling for Polygonal Representation using Canvas and JavaScript?
First off I'm not used to dealing with images, so if my wording is off please excuse me. 首先,我不习惯处理图像,所以如果我的措辞不对,请原谅。
I am looking to take an image that is dropped onto a HTML5 canvas, sample it, do a reduction of the sampling, then create a polygonal representation of the image using mostly triangles with a few other polygons and draw that image to the canvas. 我希望拍摄放在HTML5画布上的图像,对其进行采样,减少采样,然后使用主要使用其他几个多边形的三角形创建图像的多边形表示,并将该图像绘制到画布上。
But I do not know where to start with an algorithm to do so. 但我不知道从哪个算法开始这样做。 What sort of pseudocode do I need for this kind of algorithm?
这种算法需要什么样的伪代码?
This image may offer a better understanding of the end result: 此图像可以更好地理解最终结果:
I would do the following: 我会做以下事情:
If the result needs to be triangles and not polygons, then instead of a Voronoi diagram create a Delaunay triangulation . 如果结果需要是三角形而不是多边形,则代替Voronoi图创建Delaunay三角剖分 。 GitHub has 15 JavaScript libraries for this , but I've not tried any to be able to specifically recommend one.
GitHub有15个JavaScript库 ,但我没有尝试任何能够专门推荐一个。
Ok, it's a bit indirect, but here goes.....! 好吧,这有点间接,但是这里......
This is a plugin for SVG that turns images into pointilized art: https://github.com/gsmith85/SeuratJS/blob/master/seurat.js 这是一个SVG的插件,可以将图像转换为有针对性的艺术: https : //github.com/gsmith85/SeuratJS/blob/master/seurat.js
Here's the interesting part. 这是有趣的部分。 Under the hood, it uses canvas to do the processing!
在引擎盖下,它使用画布进行处理!
The examples show images composed of "dots" and "squares". 这些例子显示了由“点”和“正方形”组成的图像。
Perhaps you can modify the code to produce your triangles -- even just cut the squares diagonally to create triangles. 也许您可以修改代码来生成三角形 - 甚至只是沿对角线切割正方形以创建三角形。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.