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


Posted in Javascript onFebruary 18, 2016

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

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

直接上demo先:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (也可以在移动端看,不过因为计算量比较大,移动设备计算起来会比PC要多花些时间。)

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

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

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

先将图片绘制到canvas上:

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

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

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

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

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

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

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

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 收集色值大于40的边缘像素点
var collectors = [];
Sobel(imgData , function(value , x , y){
if(value > 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<length;l++){
random = (Math.random()*collectors.length)<<0;
particles.push(collectors[random]);
collectors.splice(random , 1);
}
// 添加四顶点坐标
particles.push([0,0] , [0,canvas.height] , [canvas.width,0] , [canvas.width,canvas.height]);

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

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

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

// 使用delaunay三角化获取三角坐标
var triangles = Delaunay.triangulate(particles);
var x1,x2,x3,y1,y2,y3,cx,cy;
for(var i=0;i < triangles.length; i+=3) {
x1 = particles[triangles[i]][0];
x2 = particles[triangles[i+1]][0];
x3 = particles[triangles[i+2]][0];
y1 = particles[triangles[i]][1];
y2 = particles[triangles[i+1]][1];
y3 = particles[triangles[i+2]][1];
// 获取三角形中心点坐标
cx = ~~((x1 + x2 + x3) / 3);
cy = ~~((y1 + y2 + y3) / 3);
// 获取中心点坐标的颜色值
index = (cy*imgData.width + cx)*4;
var color_r = imgData.data[index];
var color_g = imgData.data[index+1];
var color_b = imgData.data[index+2];
// 绘制三角形
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fillStyle = "rgba("+color_r+","+color_g+","+color_b+",1)";
ctx.fill();
ctx.restore();
}

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

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

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

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

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

Javascript 相关文章推荐
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
js实现显示手机号码效果
Mar 09 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 #Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 #Javascript
AngularJS 2.0新特性有哪些
Feb 18 #Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
Php图像处理类代码分享
2012/01/19 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
审计主管岗位职责
2014/01/31 职场文书
大学生活动策划方案
2014/02/10 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
详解Python中的进程和线程
2021/06/23 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis