1、灰度滤镜

对于灰度滤镜的实现一般有三种算法

1) 最大值法：即新的颜色值R=G=B=Max(R,G,B),通过这种方法处理后的图片看起来亮度值偏高。

2) 平均值法：即新的颜色值R=G=B=(R+G+B)/3,这种方法处理的效果比较柔和

3) 加权平均值法：即新的颜色值R=G=B=(R*Wr+G*Wg+B*Wb)，一般由于人眼对不同颜色的敏感度不一样，所以三种颜色值的权重不一样，一般来说绿色最高，红色其次，蓝色最低，最合理的取值分别为Wr=30%，Wg=59%，Wb=11%

在这里我们使用加权平均值法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function greyEffect(canvasId){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        pixelData = imageData.data;
    for(var i=0;i<canvas.width*canvas.height;i++){
        var r = pixelData[i*4+0],
            g = pixelData[i*4+1],
            b = pixelData[i*4+2];
        var grey = 0.3 * r + 0.59 * g + 0.11 * b;
        pixelData[i*4+0] = grey;
        pixelData[i*4+1] = grey;
        pixelData[i*4+2] = grey;
    }
    return imageData;
}

2、黑白滤镜

算法原理：求RGB平均值Avg=(R+G+B)/3，如果Avg>=100，则新的颜色值为R=G=B=255；如果Avg<100，则新的颜色值为R=G=B=0；255就是白色，0就是黑色；至于为什么用100作比较，这是一个经验值吧，设置为128也可以，可以根据效果来调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function blackEffect(canvasId){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        pixelData = imageData.data;
    for(var i=0;i<canvas.width*canvas.height;i++){ var r = pixelData[i*4+0], g = pixelData[i*4+1], b = pixelData[i*4+2]; var grey = (r+g+b)/3; if(grey>=100){
            v = 255;
        }else{
            v = 0;
        }
        pixelData[i*4+0] = v;
        pixelData[i*4+1] = v;
        pixelData[i*4+2] = v;
    }
    return imageData;
}

3、反相滤镜（底片效果）

算法原理：将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值，即R=255–R；G=255–G；B=255–B

1
2
3
4
5
6
7
8
9
10
11
12
function reverseEffect(canvasId){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        pixelData = imageData.data;
    for(var i=0;i<canvas.width*canvas.height;i++){
        pixelData[i*4+0] = 255-pixelData[i*4+0];
        pixelData[i*4+1] = 255-pixelData[i*4+1];
        pixelData[i*4+2] = 255-pixelData[i*4+2];
    }
    return imageData;
}

4、模糊滤镜

算法原理：将当前像素的周边像素的RGB值各自的平均值作为新的RGB值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function blurEffect(size){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),pixelData = imageData.data,
        tmpimageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        tmppixelData = imageData.data;
    size = size ? size : 1;
    var count = Math.pow((size*2+1),2)-1;
    for(var i=0;i<canvas.height;i++){
        for(var j=0;j<canvas.width;j++){
            var totalr = 0,totalg = 0,totalb = 0;
            for(var dx=i-size;dx<=i+size;dx++){
                for(var dy=j-size;dy<=j+size;dy++){
                    var p = dx * canvas.width + dy;
                    if(dx===i && dy===j) continue;
                    tmppixelData[p*4+0] && (totalr += tmppixelData[p*4+0]);
                    tmppixelData[p*4+1] && (totalg += tmppixelData[p*4+1]);
                    tmppixelData[p*4+2] && (totalb += tmppixelData[p*4+2]);
                }
            }
            var p = i * canvas.width + j;
            pixelData[p*4+0] = totalr/count;
            pixelData[p*4+1] = totalg/count;
            pixelData[p*4+2] = totalb/count;
        }
    }
    return imageData;
}

5、马赛克滤镜

算法原理：其实就是将图像分成大小一致的图像块，每一个图像块都是一个正方形，并且在这个正方形中所有像素值都相等。我们可以将这个正方形看作是一个模板窗口，模板中对应的所有图像像素值都等于该模板的左上角第一个像素的像素值，这样的效果就是马赛克效果，而正方形模板的大小则决定了马赛克块的大小，即图像马赛克化的程度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function gosike(size){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),pixelData = imageData.data,
        tmpimageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        tmppixelData = imageData.data;
    size = size ? size : 16;
    var totalNum = Math.pow(size,2);
    var count = Math.pow((size*2+1),2);
    for(var i=0;i<canvas.height;i+=size){
        for(var j=0;j<canvas.width;j+=size){
            var totalr = 0,totalg = 0,totalb = 0;
            for(var dx=0;dx<=size;dx++){
                for(var dy=0;dy<=size;dy++){
                    var x = i + dx;
                    var y = j + dy;
                    var p = x * canvas.width + y;
                    totalr += tmppixelData[p*4+0];
                    totalg += tmppixelData[p*4+1];
                    totalb += tmppixelData[p*4+2];
                }
            }
            var p = i * canvas.width + j;
            var avgr = totalr/count;
            var avgg = totalg/count;
            var avgb = totalb/count;
            for(var dx=0;dx<=size;dx++){
                for(var dy=0;dy<=size;dy++){
                    var x = i + dx;
                    var y = j + dy;
                    var p = x * canvas.width + y;
                    pixelData[p*4+0] = avgr;
                    pixelData[p*4+1] = avgg;
                    pixelData[p*4+2] = avgb;
                }
            }
        }
    }
    return imageData;
}

6、浮雕滤镜

算法原理：用当前点的RGB值减去相邻点的RGB值并加上128作为新的RGB值。由于图片中相邻点的颜色值是比较接近的，因此这样的算法处理之后，只有颜色的边沿区域，也就是相邻颜色差异较大的部分的结果才会比较明显，而其他平滑区域则值都接近128左右，也就是灰色，这样就具有了浮雕效果。在实际的效果中，这样处理后，有些区域可能还是会有一些"彩色"的点或者条状痕迹，所以最好再对新的RGB值做一个灰度处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function outset(size){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        pixelData = imageData.data,
        precolor = {};
    for(var i=0;i<canvas.width*canvas.height;i++){
        if(i==0){
            precolor = {
                r : pixelData[i*4+0],
                g : pixelData[i*4+1],
                b : pixelData[i*4+2]
            }
        }else{
            var r = pixelData[i*4+0] - precolor.r + 128;
            var g = pixelData[i*4+1] - precolor.g + 128;
            var b = pixelData[i*4+2] - precolor.b + 128;
            precolor = {
                r : pixelData[i*4+0],
                g : pixelData[i*4+1],
                b : pixelData[i*4+2]
            }
            pixelData[i*4+0] = r;
            pixelData[i*4+1] = g;
            pixelData[i*4+2] = b;
        }
        var r = pixelData[i*4+0],
            g = pixelData[i*4+1],
            b = pixelData[i*4+2];
        var grey = 0.3 * r + 0.59 * g + 0.11 * b;
        pixelData[i*4+0] = grey;
        pixelData[i*4+1] = grey;
        pixelData[i*4+2] = grey;
    }
    return imageData;
}

7、去色滤镜

算法原理：将当前像素的RGB值得最大值和最小值求平均值并作为新的RGB值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function removeColor(){
    var canvas = document.getElementById(canvasId),
        ctx = canvas.getContext("2d"),
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
        pixelData = imageData.data;
    for(var i=0;i<canvas.width*canvas.height;i++){
        var r = pixelData[i*4+0],
            g = pixelData[i*4+1],
            b = pixelData[i*4+2];
        var c = Math.floor((Math.min(r,g,b) + Math.max(r,g,b))/2);
        pixelData[i*4+0] = c;
        pixelData[i*4+1] = c;
        pixelData[i*4+2] = c;
    }
    return imageData;
}

用Canvas实现一些简单的图片滤镜的更多相关文章

  1. Canvas 知识体系简单总结

    Canvas 知识体系简单总结 标签(空格分隔): HTML5 Canvas 本文原创,如需转载,请注明出处 前言 知识点零零散散,一个上午整理了一下,内容不多,方便记忆. 本文不是教程,如需教程移步 ...

  2. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  3. Expression Blend4经验分享：制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  4. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  5. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  6. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  7. 一般处理程序生成简单的图片验证码并通过html验证用户输入的验证码是否正确

    一般处理程序生成简单的图片验证码并通过html验证用户输入的验证码是否正确       最近没事研究了下验证码的的动态生成及通过cookie实现HTML页面对用户输入的验证码的校验,简要如下: 1.写 ...

  8. 简单实现图片间的切换动画 主要用到ViewPager

    简单实现图片间的切换动画 主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适 ...

  9. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

随机推荐

  1. SQlite的结构——存储管理

    在今天的商业应用中,主要有两种基本类型的DBMS(数据库管理系统)存储管理器: (1)DBMS直接与底层的面向磁盘的块模式设备驱动程序进行交互(通常称为原始模式访问); (2)DBMS使用标准的OS文 ...

  2. Druid、BoneCP、DBCP、C3P0等主流数据库对比

    关键功能 Druid BoneCP DBCP C3P0 Proxool JBoss LRU 是 否 是 否 是 是 PSCache 是 是 是 是 否 是 PSCache-Oracle-Optimiz ...

  3. UVA11584-Partitioning by Palindromes(动态规划基础)

    Problem UVA11584-Partitioning by Palindromes Accept: 1326  Submit: 7151Time Limit: 3000 mSec Problem ...

  4. centos7 mongodb安装

    参考文档 http://www.runoob.com/mongodb/mongodb-connections.html https://www.cnblogs.com/layezi/p/7290082 ...

  5. 错误Matplotlib is building the font cache using fc-list. This may take a moment.

    这上面的错误是因为你环境中没有安装GUI工具,但是你在代码中又想要显示图片,即有下面的语句: plt.imshow(np.transpose(npimg, (, , ))) plt.show() 那么 ...

  6. AJAX请求返回HTTP 400 错误 - 请求无效 (Bad request)

    在ajax请求后台数据时有时会报HTTP400错误-请求无效(Badrequest);出现这个请求无效报错说明请求没有进入到后台服务里: 原因: 1)前端提交数据的字段名称或者是字段类型和后台的实体类 ...

  7. 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法

    问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...

  8. Vscode更新之后rg.exe占用cpu过高

    文件->首选项->搜索"search.followSymlinks"改为false https://www.zhihu.com/question/67317040

  9. Sql Server利用游标批量清空数据表

    先吐槽一下,由于公司要为新客户部署一个全新的系统,然而公司并没有空库,所以只能把正在线上运行的数据库给备份,然后清空相关数据 下面分享一下我在做清空数据库时写的一个批量清空数据表的方法 思路:查询出该 ...

  10. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...