用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匹配手机屏幕横竖状态
Jan 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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
一个域名查询的程序
2006/10/09 PHP
PHP中读写文件实现代码
2011/10/20 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
对Python中plt的画图函数详解
2018/11/07 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
薇姿法国官网:Vichy法国
2021/01/28 全球购物
实习介绍信模板
2015/01/30 职场文书
大学生求职意向书
2015/05/11 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL