canvas滤镜效果实现代码

 更新时间:2017年02月06日 15:56:19   作者:蓝丶木鱼  
这篇文章主要为大家详细介绍了canvas滤镜效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例为大家分享了canvas实现滤镜效果的具体代码,供大家参考,具体内容如下

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>canvas-滤镜</title>
  <style>
    canvas{
      border: 1px solid red;
      float: left;
      /* background-color:red; */
    }
  </style>
</head>
<body>
  <canvas id="oldCanvas" width="500px" height="300px">
  </canvas>
  <canvas id="nowCanvas" width="500px" height="300px">
  </canvas>
  <button onclick = "copy2()">底片效果</button><br>
  <button onclick = "copy3()">黑白效果</button><br>
  <button onclick = "copy4()">浮雕效果</button><br>
  <button onclick = "copy1()">灰色滤镜</button><br>
  <button onclick = "copy5()">绿色滤镜</button><br>
  <button onclick = "copy6()">蓝色滤镜</button><br>
  <button onclick = "copy7()">红色滤镜</button><br>
  <button onclick = "copy8()">黄色滤镜</button><br>
  <button onclick = "copy9()">紫色滤镜</button><br>
  <button onclick = "copy10()">青色滤镜</button><br>
  <script>
    //获取到canvas元素
    var oldcanvas = document.getElementById('oldCanvas');
    //获取canvas中的画图环境
    var oldcontext = oldcanvas.getContext('2d');
    //获取到canvas元素
    var nowcanvas = document.getElementById('nowCanvas');
    //获取canvas中的画图环境
    var nowcontext = nowcanvas.getContext('2d');
  
    var img = new Image();
    img.src = "./image/liuyifei.jpg";
  
    window.onload = function (){
      //绘制图像
      oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);
      copy1();
    };
  
    //灰度效果
    function copy1(){
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
      for(var i=0;i<imgdata.data.length;i += 4){
        //计算获取单位元素的RBG然后取平均值 然后复制给自身得到灰色的图像
        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
        imgdata.data[i] =avg;
        imgdata.data[i+1] =avg;
        imgdata.data[i+2] =avg;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
    //底片效果
    function copy2(){
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
      for(var i=0;i<imgdata.data.length;i += 4){
        //将所有的RGB值重新赋值(底片效果 = 255 - 当前的RGB值)
        imgdata.data[i] =255-imgdata.data[i];
        imgdata.data[i+1] =255-imgdata.data[i+1];
        imgdata.data[i+2] =255-imgdata.data[i+2];
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  
    //黑白效果
    function copy3(){
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
      for(var i=0;i<imgdata.data.length;i += 4){
        //计算获取单位元素的RBG然后取平均值
        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
        imgdata.data[i] =avg>128 ? 255 :0;
        imgdata.data[i+1] =avg>128 ? 255 :0;
        imgdata.data[i+2] =avg>128 ? 255 :0;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  
    //浮雕效果
    function copy4(){
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
      for(var i=0;i<imgdata.data.length;i += 4){
        //浮雕效果的算法:当前RGB减去相邻的GRB得到的值再加上128
        imgdata.data[i] =imgdata.data[i]-imgdata.data[i+4]+128;
        imgdata.data[i+1] =imgdata.data[i+1]-imgdata.data[i+5]+128;
        imgdata.data[i+2] =imgdata.data[i+2]-imgdata.data[i+6]+128;
        //计算获取单位元素的RBG然后取平均值 再次灰度,优化浮雕的效果
        var avg = (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3;
        imgdata.data[i] =avg;
        imgdata.data[i+1] =avg;
        imgdata.data[i+2] =avg;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  
    //绿色滤镜
    function copy5(){
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0,0,oldcanvas.width,oldcanvas.height);
      for(var i=0;i<imgdata.data.length;i += 4){
        //绿色滤镜的算法:当前绿色通道值G*1.4得到绿色滤镜
        var g =imgdata.data[i+1]*1.4;
        //注:当前值大于255时将其赋值255
        imgdata.data[i+1] =g>255 ? 255 : g;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
    //蓝色滤镜
    function copy6() {
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
      for (var i = 0; i < imgdata.data.length; i += 4) {
        //蓝色滤镜的算法:当前蓝色通道值变为原来的1.6得到蓝色滤镜
        var b = imgdata.data[i + 2] * 1.6;
        //注:当前值大于255时将其赋值255
        imgdata.data[i + 2] = b > 255 ? 255 : b;
  
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  
    //红色滤镜
    function copy7() {
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
      for (var i = 0; i < imgdata.data.length; i += 4) {
        //红色滤镜的算法:当前红色通道值变为原来的2得到红色滤镜
        var r = imgdata.data[i] * 2;
        //注:当前值大于255时将其赋值255
        imgdata.data[i] = r > 255 ? 255 : r;
  
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  
    //黄色滤镜
    function copy8() {
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
      for (var i = 0; i < imgdata.data.length; i += 4) {
        //黄色滤镜的算法:红色通道值和绿色通道值增加50(红色+绿色 = 黄色)
        var r = imgdata.data[i] +50;
        var g = imgdata.data[i+1] +50
        //注:当前值大于255时将其赋值255
        imgdata.data[i] = r > 255 ? 255 : r;
        imgdata.data[i+1] = g > 255 ? 255 : g;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
    //紫色滤镜
    function copy9() {
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
      for (var i = 0; i < imgdata.data.length; i += 4) {
        //紫色滤镜的算法:红色通道值和蓝色通道值增加50(红色+蓝色 = 紫色)
        var r = imgdata.data[i] +50;
        var b = imgdata.data[i+2] +50
        //注:当前值大于255时将其赋值255
        imgdata.data[i] = r > 255 ? 255 : r;
        imgdata.data[i+2] = b > 255 ? 255 : b;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
    //青色滤镜
    function copy10() {
      //获取ImageData的属性:width,height,data(包含 R G B A 四个值);
      var imgdata = oldcontext.getImageData(0, 0, oldcanvas.width, oldcanvas.height);
      for (var i = 0; i < imgdata.data.length; i += 4) {
        //青色滤镜的算法:绿色通道值和蓝色通道值增加50(绿色+蓝色 = 青色)
        var g = imgdata.data[i+1] +50;
        var b = imgdata.data[i+2] +50
        //注:当前值大于255时将其赋值255
        imgdata.data[i+1] = g > 255 ? 255 : g;
        imgdata.data[i+2] = b > 255 ? 255 : b;
      }
      //将图像信息绘制第二个canvas中,注:一般只能在服务下运行
      nowcontext.putImageData(imgdata,0,0);
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

最新评论