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. WPF设计の画刷（Brush）

    一.什么是画刷 画刷是是一种渲染方式,用于填充图形形状,如矩形.椭圆.扇形.多边形和封闭路径.在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,Li ...

  2. dubbo远程方法调用的基本原理

    1 dubbo是远程服务调用rpc框架 2 dubbo缺省协议采用单一长连接和NIO通讯 1client端生成一个唯一的id,封装方法调用信息obj(接口名,方法名,参数,处理结果的回调对象),在全局 ...

  3. P1182 数列分段`Section II`（贪心+二分， 好题）

    这道题让我见识了二分的新姿势.本来,我是二分的位置的. 思路:直接二分答案x, 关键是检验函数的写法: 先用前缀和 a[i....], 看满足多少段满足 a[ j ]-a[ i ]<=x; 的注 ...

  4. 【转】CefSharp语言(Locales)本地化问题

    CefSharp默认是嵌入的chrome浏览器内核,默认英文,所以右键菜单以及一些功能都是英文显示. 国内用需要汉化.CefSharp本身支持本地化Locales,需要在初始化Browser的时候设置 ...

  5. Python学习笔记(2)-字典

    什么是字典? 像列表一样,但是不能想列表用下表索引,而是通过'键',键及其关联的值称为'键-值'对.字典经常会简写成dict 创建字典{} 例如: >>> dict = {'one' ...

  6. 4、原生jdbc链接数据库常用资源名

    原生jdbc链接数据库要素:#MySql:String url="jdbc:mysql://localhost:3306/数据库名";String name="root& ...

  7. 四、Oracle 序列、常用函数、多表连接

    一.序列定义:是oracle数据库专门用来产生连续且自动增长的数字的对象创建语法:create sequence 序列名(sq_表名) nocache(无缓存) create sequence sq_ ...

  8. flask-sqlalchemy中Datetime的创建时间、修改时间,default，server_default，onupdate

    记录第一次创建时间,default falsk中如下两个字段 create_time1 = db.Column(db.DateTime, default=datetime.now) create_ti ...

  9. CF176E Archaeology

    CF176E Archaeology 有一棵 \(n\) 个点的带权树,每个点都是黑色或白色,最初所有点都是白色的.有 \(m\) 个询问: 把点 \(x\) 从白色变成黑色 把点 \(x\) 从黑色 ...

  10. ODPS-Java-SDK快速入门

    一.简介 核心接口包括:AliyunAccount,MaxCompute(SDK中使用原名ODPS)等常见对象组件 更多参见文档:https://help.aliyun.com/document_de ...