JavaScript 多种滤镜算法

Posted 2020-11-23 zizizi97

1.灰色滤镜

设定R,G,B值相等

1 function makeGray(img){
2   for(var pixel of img.values()){
3     var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
4     pixel.setRed(avg);
5     pixel.setGreen(avg);
6     pixel.setBlue(avg);
7   }
8   return img;
9 }

2.单色滤镜（以红色为例）

计算R,G,B的均值avg，判断avg是否小于128.

 1 function makeRed(img){
 2   for(var pixel of img.values()){
 3     var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
 4     if(avg<128){
 5       pixel.setRed(2*avg);
 6       pixel.setGreen(0);
 7       pixel.setBlue(0);
 8     }
 9     else{
10       pixel.setRed(255);
11       pixel.setGreen(2*avg-255);
12       pixel.setBlue(2*avg-255);
13     }
14   }
15   return img;
16 }

3.彩色滤镜

 1 function makeRainbow(img){
 2   for(var pixel of img.values()){
 3     var x = pixel.getX();
 4     var y = pixel.getY();
 5     var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
 6     var h = img.height;
 7     if(y<h/7){
 8       if(avg<128){
 9         pixel.setRed(2*avg);
10         pixel.setGreen(0);
11         pixel.setBlue(0);
12       }
13       else{
14         pixel.setRed(255);
15         pixel.setGreen(2*avg-255);
16         pixel.setBlue(2*avg-255);
17       }
18     }
19     if(y>=h/7 && y<h*2/7){
20       if(avg<128){
21         pixel.setRed(2*avg);
22         pixel.setGreen(0.8*avg);
23         pixel.setBlue(0);
24       }
25       else{
26         pixel.setRed(255);
27         pixel.setGreen(1.2*avg-51);
28         pixel.setBlue(2*avg-255);
29       }
30     }
31     if(y>=h*2/7 && y<h*3/7){
32       if(avg<128){
33         pixel.setRed(2*avg);
34         pixel.setGreen(2*avg);
35         pixel.setBlue(0);
36       }
37       else{
38         pixel.setRed(255);
39         pixel.setGreen(255);
40         pixel.setBlue(2*avg-255);
41       }
42     }
43     if(y>=h*3/7 && y<h*4/7){
44       if(avg<128){
45         pixel.setRed(0);
46         pixel.setGreen(2*avg);
47         pixel.setBlue(0);
48       }
49       else{
50         pixel.setRed(2*avg-255);
51         pixel.setGreen(255);
52         pixel.setBlue(2*avg-255);
53       }
54     }
55     if(y>=h*4/7 && y<h*5/7){
56       if(avg<128){
57         pixel.setRed(0);
58         pixel.setGreen(0);
59         pixel.setBlue(2*avg);
60       }
61       else{
62         pixel.setRed(2*avg-255);
63         pixel.setGreen(2*avg-255);
64         pixel.setBlue(255);
65       }
66     }
67     if(y>=5*h/7 && y<h*6/7){
68       if(avg<128){
69         pixel.setRed(0.8*avg);
70         pixel.setGreen(0);
71         pixel.setBlue(2*avg);
72       }
73       else{
74         pixel.setRed(1.2*avg-51);
75         pixel.setGreen(2*avg-255);
76         pixel.setBlue(255);
77       }
78     }
79     if(y>=h*6/7){
80       if(avg<128){
81         pixel.setRed(1.6*avg);
82         pixel.setGreen(0);
83         pixel.setBlue(1.6*avg);
84       }
85       else{
86         pixel.setRed(0.4*avg+153);
87         pixel.setGreen(2*avg-255);
88         pixel.setBlue(0.4*avg+153);
89       }
90     }
91   }
92   return img;
93 }

4.模糊滤镜

（1）生成（0，1）之间的