用canvas 实现个图片三角化(LOW POLY)效果
之前无意中看到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上,就会发现,彩色图片变成了这样的灰度图片:
由于上面说的那个Sobel组件不是很适合自己的用法,同时代码也有不恰当的地方,所以自己做了适当修改和优化,优化了循环方法,加快了运算速度,同时加入了回调函数。详见该项目github中的sobel.js文件
在Sobel方法中对imgData.data进行遍历的时候,会调用回调函数,在回调中把颜色值大于40(也就是灰度为rgb(40,40,40)以上的)的坐标点记录下来。然后随机获取一部分边缘点,再加入一些随机出来的坐标 以及 四个边角的坐标值。这样,我们就可以获取到我们需要的坐标点了
- var imgData = ctx.getImageData(, , canvas.width, canvas.height);
- // 收集色值大于40的边缘像素点
- var collectors = [];
- Sobel(imgData , function(value , x , y){
- if(value > ){collectors.push([x , y]);}
- });
- // 添加一些随机点
- for(var i=;i<;i++){particles.push([Math.random()*canvas.width , Math.random()*canvas.height]);}
- // 添加随机边缘点,数量为边缘点数量除于50
- var length = ~~(collectors.length/), random;
- for(var l=;l<length;l++){
- random = (Math.random()*collectors.length)<<;
- particles.push(collectors[random]);
- collectors.splice(random , );
- }
- // 添加四顶点坐标
- particles.push([,] , [,canvas.height] , [canvas.width,] , [canvas.width,canvas.height]);
获取到坐标点后,就可以通过delaunay组件计算,获取到拍好次序的三角坐标数组,对这些数组里的点进行连线,就可以出现这样的效果:
当然,我们要的效果不是连线,而是对所有三角形进行颜色填充,也就是获取三角形的三个坐标,然后计算出中心点的坐标,再根据中心点坐标在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索引的时候再取整,获取到的颜色值就是错的。因为这样获取到的那个像素点就不是我们要的中心像素点。
颜色也获取到后,就是简单的连线,然后填充操作了,最后出来的效果就是:
虽然没有设计师手动描出来的好看,不过也方便很多,做来玩玩还是挺有意思的。
源码地址,有兴趣的可以一看哈:
https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/lowpoly
用canvas 实现个图片三角化(LOW POLY)效果的更多相关文章
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- canvas生成遮罩图片
首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...
- Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- canvas 2.0 图片绘制
绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- 基于canvas图像处理的图片展示demo
图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
随机推荐
- 按要求编写Java应用程序。 (1)建立一个名叫Cat的类: 属性:姓名、毛色、年龄 行为:显示姓名、喊叫 (2)编写主类: 创建一个对象猫,姓名为“妮妮”,毛色为“灰色”,年龄为2岁,在屏幕上输 出该对象的毛色和年龄,让该对象调用显示姓名和喊叫两个方法。
package zuoye; public class Cat { String name="妮妮"; String color="灰色"; int age=1 ...
- od
$od [-t type]查看非文本文件 a 使用默认字符输出 c 使用ASC II字符输出 d[size] 使用十进制来输出数据,每个整数占用size byte o ..八 x ..十六 f ..浮 ...
- 理解linux and inode
inode是一个重要概念,是理解Unix/Linux文件系统和硬盘储存的基础. 我觉得,理解inode,不仅有助于提高系统操作水平,还有助于体会Unix设计哲学,即如何把底层的复杂性抽象成一个简单概念 ...
- 构建 ARM Linux 4.7.3 嵌入式开发环境 —— U-BOOT 引导 Kernel
经过若干天的反复测试,搜索.终于成功利用 Qemu 在 u-boot 下引导 ARM Linux 4.7.3 内核.如下详细解释整个构建过程. 准备环境 运行环境:Ubuntu 16.04 需要的虚拟 ...
- Android界面隐藏软键盘的探索(兼findViewById返回null解决办法)
最近写的APP,老师说我的登陆界面虽然有ScrollView滑动,但用户体验不太好,因为软键盘会挡住输入框或登录button(小米Pad,横屏,当指定只能输入数字时没找到关闭系统自带键盘的下箭头). ...
- 免费股票数据API接口
免费股票数据API接口提供沪深.香港.美国股市信息. 1.沪深股市 2.香港股市 3.美国股市 4.香港股市列表 5.美国股市列表 6.深圳股市列表 7.沪股列表 API文档:https://www. ...
- SpringMVC从入门到精通之第四章
第一个知识点:@Controller注解,用于标识这个类是一个后端控制器(类似struts中的action),主要作用就是接受页面的参数,转发页面.中间的业务逻辑是调用业务类处理的这个就是MVC设计模 ...
- ARM学习篇一 点亮LED
要点亮LED,先决条件是什么,当然得有相应的硬件设施.板子的整个电路图比较大,我就直接取相关部分. 给发光二级管加上3.3v电压后,通过1k电阻,直接与S3C2440连接.至于为什么要加电阻,大家应该 ...
- Unity热门插件推荐
前言 Unite2015的笔记 ,本文所提到的扩展主要针对 mobile上使用. 文中资源在Asset Store描述的截图日期:2016-04-28 Mesh Baker https://www.a ...
- 扩展Unity的方法
写更少代码的需求 当我们重复写一些繁杂的代码,或C#的一些方法,我们就想能不能有更便捷的方法呢?当然在unity中,我们对它进行扩展. 对unity的类或C#的类进行扩展有以下两点要注意: 1.这个类 ...