用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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
详解Angular2响应式表单
Jun 14 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
react项目从新建到部署的实现示例
Feb 19 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的闭包(Closure)匿名函数详解
2015/02/22 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Django框架模板介绍
2019/01/15 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python基于template实现字符串替换
2020/11/27 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
安全生产管理合理化建议书
2014/03/12 职场文书
安全教育演讲稿
2014/05/09 职场文书
宣传标语大全
2014/07/01 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
校本研修个人总结
2015/02/28 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python