当我接手这个项目时，我认为像黑白/棕褐色这样的滤镜很难通过照片处理来制作。一切都变得更简单！
下面我将给出一个有趣的算法，用于将图像分解为像素光谱并处理照片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>filter fun</h1>
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/simpleimage.js"> </script>
<canvas id="can"></canvas>
<p> <b>
load image: <input type="file" multiple="false" accept="image/*" id="file" onchange="loadimage()">
</b> </p>
<input type="button" id="button" value="grayscale" onclick="dogray()">
<input type="button" id="button" value="red" onclick="dored()">
<input type="button" id="button" value="rainbow" onclick="dorainbow()">
<p>
<input type="button" id="button" value="reset image" onclick="reset()">
</p>
我暗示类似这样的事情（当然，任何文件）：
即使是最简单的设计，最好还是对齐。您将更快地掌握大型项目的窍门。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h1 {
font-size: 22pt;
font-family: arial;
color: #008b8b;
}
body {
background-color: #f5f5dc;
}
p {
font-size: 16pt;
}
canvas {
width: 400px;
background-color: #add8e6;
border: 2px solid #a9a9a9;
}
input {
font-size: 12pt;
}
算法的本质如下：
互联网上的任何图像都会分解为光谱：红、绿、蓝 创建3个数组，存储图像中对应颜色的像素个数（详细函数见代码） 选择滤镜时：依次处理3个数组以增加/减少调色板值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
var imgFile;
var image = null;
var imageGray = null;
var imageRed = null;
var imageRainbow = null;
var canvas = null;
function loadImage(){
canvas = document.getElementById("can");
imgFile = document.getElementById("file");
image = new SimpleImage(imgFile);
imageGray = new SimpleImage(imgFile);
imageRed = new SimpleImage(imgFile);
imageRainbow = new SimpleImage(imgFile);
image.drawTo(canvas);
}
function imageIsLoaded(img) {
if (img==null || !img.complete()) {
alert("Image not loaded");
return false;
}
else {
return true;
}
}
function doGray(){
if (imageIsLoaded(image)) {
for (var pixel of imageGray.values()) {
var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
pixel.setRed(arg);
pixel.setGreen(arg);
pixel.setBlue(arg);
}
imageGray.drawTo(canvas);
}
}
function doRed(){
if (imageIsLoaded(image)) {
for (var pixel of imageRed.values()) {
var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
if (arg < 128) {
pixel.setRed(arg*2);
pixel.setGreen(0);
pixel.setBlue(0);
}
else {
pixel.setRed(255);
pixel.setGreen(arg*2-255);
pixel.setBlue(arg*2-255);
}
}
imageRed.drawTo(canvas);
}
}
function doRainbow(){
if (imageIsLoaded(image)) {
imageRainbow.drawTo(canvas);
}
}
function Reset(){
image = new SimpleImage(imgFile);
imageGray = new SimpleImage(imgFile);
imageRed = new SimpleImage(imgFile);
imageRainbow = new SimpleImage(imgFile);
image.drawTo(canvas);
}
这似乎是一个简单的算法，但它有助于理解图像像素并根据调色板进行处理。我认为它值得你关注！
以上就是过滤不是最难的部分的详细内容，更多请关注php中文网其它相关文章！