用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在textarea光标处插入文本的小例子
Mar 22 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
js的touch事件的实际引用
Oct 13 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
javascript求日期差的方法
Mar 02 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
es6函数中的作用域实例分析
Apr 18 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
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
DOM 高级编程
2015/05/06 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
在python里面运用多继承方法详解
2019/07/01 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python返回数组的索引实例
2019/11/28 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
django model通过字典更新数据实例
2020/04/01 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
Java如何读取CLOB字段
2013/10/10 面试题
总经理文秘岗位职责
2014/02/03 职场文书
工作保证书范文
2014/04/29 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
合作协议书范本
2014/10/25 职场文书
大学生读书笔记范文
2015/07/01 职场文书
《日月潭》教学反思
2016/02/20 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers