html - Algorithm for Image Sampling for Polygonal Representation using Canvas and JavaScript? - Stack Overflow

admin管理员组

文章数量:1327301

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.

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:

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.

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:

• javascript
• html
• image
• algorithm
• canvas

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 2, 2013 at 19:25 ars265ars265 1,98733 gold badges2121 silver badges3838 bronze badges 10

• 1 There must be a library out there that does this... this is a frequently required task. So it sounds like you want to do some type of vector tracing of a bitmap image. – Marc Audet Commented Apr 2, 2013 at 19:26
• Closely related to stackoverflow./questions/3038905/… – Marc Audet Commented Apr 2, 2013 at 19:36
• I'm trying to understand your question better. Are you asking how to generate a "Pointillism" image, but with triangles instead of dots? – markE Commented Apr 2, 2013 at 19:43
• I had added an url to the image that would be a result of the process. – ars265 Commented Apr 2, 2013 at 20:12
• An interesting question, which I hope gets reopened. – Drew Noakes Commented Apr 3, 2013 at 12:48

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 5

I would do the following:

1. Create a field of randomly-placed dots.
2. Create a Voronoi diagram from the dots.
   • Here's a good JavaScript library that I've used in the past for this: https://github./gorhill/Javascript-Voronoi
3. Color each cell based on sampling the colors.
   • Do you just pick the color at the dot? Sample all the colors within the cell and average them? Weight the average by the center of the cell? Each would produce different but possibly interesting results.

If the result needs to be triangles and not polygons, then instead of a Voronoi diagram create a Delaunay triangulation. GitHub has 15 JavaScript libraries for this, but I've not tried any to be able to specifically remend one.

Ok, it's a bit indirect, but here goes.....!

This is a plugin for SVG that turns images into pointilized art: https://github./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 posed of "dots" and "squares".

Perhaps you can modify the code to produce your triangles -- even just cut the squares diagonally to create triangles.

本文标签： htmlAlgorithm for Image Sampling for Polygonal Representation using Canvas and JavaScriptStack Overflow