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

2016-02-19 10:18 40 1 收藏

下面是个超简单的用canvas实现图片滤镜效果附演示教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

这是一个很有意思的特效,模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果。颗粒的大小通过变换矩阵实现,可以任意调节,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的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开源项目

来源:http://www.tulaoshi.com/n/20160219/1594174.html

延伸阅读
标签: Web开发
今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看,然后再分析实现过程。 首先,我们看看border如何生成的对角线效果,在你的...
本教程主要是灵活运用滤镜来制作各种实物效果,制作的时候先要分析下实物的具体特性然后再用PS慢慢的制作出来,有的效果用滤镜比鼠绘更快! 最终效果 1、新建一个宽度为12,高度为12,分辨率为300像素,模式为RGB的白色文件。 2、设置前景色和背景色分别为黑色和白色。执行菜单栏中的“滤镜”→“渲染”→“云彩”命令,效果如图1所...
标签: PS PS教程
原图: 打开复制一个图层,然后隐藏背景显示: 执行“滤镜”-“抽出”,画出边缘: 填充颜色: 按Ctrl点击图层载入选区,然后进行羽化: [next] 设置前景色为黄色,背景色为红色,进行渐变填充: 最后设置图层模式为柔光: 拼合图层,最终效果:
标签: PS PS基础
先看效果对比 首先打开猫咪图片。 Ctrl+J复制背景,滤镜其它高反差保留。 图层模式强光,类似下图效果。 之后再复制图层1,得到副本,图层模式仍为强光。 以上步骤目的是锐化图像。下面复制背景层,图层模式改为滤色。 添加蒙版,用笔刷涂抹,只保留猫咪的脸部和白毛部分。 之后盖印层。 图像调整阴影/高光...
标签: 电脑入门
过去,在幻灯片演示结束后,习惯用一个谢谢大家的画面来结束播放。不过近年来这一做法却不再流行,大家更倾向于播放结束后马上回到封面页,以显示演讲题目和演讲人等信息。特别是一些固定场所的演示,更希望能够循环播放,而不是播放完成后退出播放状态,再从第一张进入重新播放。 其实,要实现这样的效果并不难,只需要一个小小的超链接就可...

经验教程

215

收藏

85
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部