用canvas 实现个图片三角化(LOW POLY)效果

前端之家收集整理的这篇文章主要介绍了用canvas 实现个图片三角化(LOW POLY)效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下。

  我是没怎么用过threejs,所以就直接用canvas的2d绘图API来做,因为感觉似乎这效果也用不上threejs。

  直接上demo先:(也可以在移动端看,不过因为计算量比较大,移动设备计算起来会比PC要多花些时间。)

  做这种效果主要需要把图片三角化,以及对图片进行边缘化检测。这两个,第一个用到的delaunay三角化算法,第二个用到的sobel边缘检测算法。听起来偷挺高大上的,索性两个算法都有相应的开源组件可以直接拿来用:ironwallaby的delaunay组件 以及 Miguel Mota的sobel组件。

  这两个算法sobel还好一点,delaunay就有点复杂了,待日后可以研究一下。不过目前只为做出个效果的话,还是可以用这些组件的。

  两个最重要的组件都有了,剩下的事就很简单了:

  先将图片绘制到canvas上:

800) ? 800 : img.width; canvas.height = img.height * canvas.width/img.width; ctx.drawImage(img,canvas.width,canvas.height);

然后获取到canvas的imgData,再通过sobel计算返回新的imgData

如果我们把newImgData放到canvas上,就会发现,彩色图片变成了这样的灰度图片:

由于上面说的那个Sobel组件不是很适合自己的用法,同时代码也有不恰当的地方,所以自己做了适当修改和优化,优化了循环方法,加快了运算速度,同时加入了回调函数。详见该项目github中的sobel.js文件  

在Sobel方法中对imgData.data进行遍历的时候,会调用回调函数,在回调中把颜色值大于40(也就是灰度为rgb(40,40,40)以上的)的坐标点记录下来。然后随机获取一部分边缘点,再加入一些随机出来的坐标 以及 四个边角的坐标值。这样,我们就可以获取到我们需要的坐标点了

40){collectors.push([x,y]);} }); // 添加一些随机点 for(var i=0;i<300;i++){particles.push([Math.random()*canvas.width,Math.random()*canvas.height]);} // 添加随机边缘点,数量为边缘点数量除于50 var length = ~~(collectors.length/50),random; for(var l=0;l

获取到坐标点后,就可以通过delaunay组件计算,获取到拍好次序的三角坐标数组,对这些数组里的点进行连线,就可以出现这样的效果:

当然,我们要的效果不是连线,而是对所有三角形进行颜色填充,也就是获取三角形的三个坐标,然后计算出中心点的坐标,再根据中心点坐标在imgData里获取到相应的rgb的颜色值,然后填充到三角区域就可以了:

上面有一点要注意,获取到的中心点坐标一定要取整,才能够获取到正确的颜色参数,如果想着不取整,而是在获取rgb索引的时候再取整,获取到的颜色值就是错的。因为这样获取到的那个像素点就不是我们要的中心像素点。

  颜色也获取到后,就是简单的连线,然后填充操作了,最后出来的效果就是:

以上内容给大家介绍了用canvas 实现个图片三角化(LOW POLY)效果 ,希望对大家有所帮助!

猜你在找的JavaScript相关文章