用canvas实现图片滤镜效果附演示


Posted in HTML / CSS onNovember 05, 2013

这是一个很有意思的特效,模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果。颗粒的大小通过变换矩阵实现,可以任意调节,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,大家可以自行改进。

1.获取图像数据

复制代码
代码如下:

img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext(“2d”);
context.drawImage(img, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

2.设置过滤矩阵
复制代码
代码如下:

var m_VideoType=0;
var pattern=new Array();
switch (m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
pattern = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
2, 1,
];
break;
}
case1://VIDEO_TYPE.VIDEO_TRIPED:
{
pattern = [
0,
1,
2,
];
break;
}
case2://VIDEO_TYPE.VIDEO_3X3:
{
pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
break;
}
default:
{
pattern =
[
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1, 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1,
1, 2, 2, 2, 0,
];
break;
}
}
var pattern_width = [ 2, 1, 3, 5 ];
var pattern_height = [6, 3, 3, 15 ];

3.获取过滤数据
复制代码
代码如下:

for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
var nWidth = pattern_width[m_VideoType];
var nHeight = pattern_height[m_VideoType];
var index = nWidth * (y % nHeight) + (x % nWidth);
index = pattern[index];
if (index == 0)
var r = fclamp0255(2 * r);
if (index == 1)
var g = fclamp0255(2 * g);
if (index == 2)
var b = fclamp0255(2 * b);
// assign gray scale value
canvasData.data[idx + 0] = r; // Red channel
canvasData.data[idx + 1] = g; // Green channel
canvasData.data[idx + 2] = b; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 加上黑色的边框
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}

4.写入过滤后的数据
复制代码
代码如下:

context.putImageData(canvasData, 0, 0);

5.参考资料
代震军ImageFilter开源项目
HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 #HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 #HTML / CSS
html5开发之viewport使用
Oct 17 #HTML / CSS
HTML5计时器小例子
Oct 15 #HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 #HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 #HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 #HTML / CSS
You might like
中国第一家无线电行
2021/03/01 无线电
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php利用header函数下载各种文件
2016/08/24 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
《金子》教学反思
2014/04/13 职场文书
大学生标准自荐书
2014/06/15 职场文书
中学社团活动总结
2015/05/07 职场文书
卫生主题班会
2015/08/14 职场文书
筑梦中国心得体会
2016/01/18 职场文书
数学复习课教学反思
2016/02/18 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python