Use canvas to achieve a LOW-POLY image effect,

Use canvas to achieve a LOW-POLY image effect,

Previously, I accidentally saw Ovilia using threejs to do a low poly, that is, the effect of the image plane triangle, which was amazing. Then I took some time to try it.

I have never used threejs, So I directly use the 2d drawing API of canvas, because it seems that threejs is not used for this effect.

Directly on the demo first: http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (can also be seen on the Mobile End, but because of the large amount of computing, mobile devices will spend more time computing than PC .)

To do this, you need to triangle the image and perform a marginal inspection on the image. These two algorithms are the first to use the Adaboost triangle algorithm and the second to use the sobel edge detection algorithm. It sounds very high. Both algorithms have corresponding open-source components that can be used directly: ironwallaby's node-9 component and Miguel Mota's sobel component.

These two algorithms, sobel, are even better, and the accuracy of the algorithm is complicated. You can study these algorithms later. However, you can still use these components to achieve only one effect.

The two most important components are available, and the rest is simple:

First, draw the image on the canvas:

Canvas. width = (image. width> 800 )? 800: img. width; Canvas. height = img. height * canvas. width/img. width;   Ctx. drawImage (img, 0, 0, canvas. width, canvas. height );

Obtain the imgData of the canvas, and then return the new imgData through sobel calculation.

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);   var newImgData = Sobel(imgData);

If we put newImgData on the canvas, we will find that the color image has become a gray image like this: