-
Notifications
You must be signed in to change notification settings - Fork 0
/
process_img_to_gray.html
135 lines (118 loc) · 3.88 KB
/
process_img_to_gray.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>致灰图片 - 初冬</title>
<style>
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-main {
flex: 1 1 auto;
}
.flex-middle {
align-items: center;
}
.flex-center {
justify-content: center;
}
.flex-middle {
align-items: center;
}
#hoverColor,
#clickColor {
width: 200px;
height: 100%;
color: #fff;
border: 1px solid #eee;
}
</style>
</head>
<body>
<div class="flex flex-center flex-middle" style="width: 100%; height: 100%;">
<div class="flex flex-col">
<strong>操作指南：</strong>
<ul>
<li>1. 点击 Gray 将图片致为灰色</li>
<li>2. 点击 Rest 将图片恢复为原图</li>
<li>3. 点击 Export 将图片下载到本地</li>
</ul>
<div class="">
<canvas id="myCanvas" />
</div>
<button type="button" onclick="renderToGray()"> Gray </button>
<button type="button" onclick="renderToOrigin()"> Reset </button>
<button type="button" onclick="exportImage()"> Export </button>
</div>
</div>
<script src="./img_src.js"></script>
<script>
let originImageData;
// canvas画布的高斯模糊效果
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// 为了方便测试，防止图片请求跨域，此处使用了图片的 base64 url
// 这里直接修改图片的路径
img.src = imgSrc;
// 图片加载完成，绘制在 canvas 中
img.onload = function () {
// 设置canvas的宽高
canvas.width = img.width;
canvas.height = img.height;
// 将图像绘制到canvas上面
ctx.drawImage(img, 0, 0, img.width, img.height);
// 从画布获取整个图片第数据
originImageData = ctx.getImageData(0, 0, img.width, img.height);
renderToOrigin();
};
// 获取图片的 ImageData，并进行处理
function renderToGray () {
// 从画布获取整个图片第数据
var imgData = ctx.getImageData(0, 0, img.width, img.height);
// 将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高
var processedImgData = processingImgDataToGray(imgData);
// 将模糊的图像数据再渲染到画布上面
ctx.putImageData(processedImgData, 0, 0);
}
function renderToOrigin () {
// 将模糊的图像数据再渲染到画布上面
ctx.putImageData(originImageData, 0, 0);
}
function exportImage() {
var dataUrl = canvas.toDataURL();
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = "photo"; // 设置图片名称
a.href = dataUrl; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
}
function processingImgDataToGray(imgData) {
// 第 n 个像素点
for (let n = 0; n < imgData.data.length / 4; n++) {
var r = imgData.data[4 * n];
var g = imgData.data[4 * n + 1];
var b = imgData.data[4 * n + 2];
// 灰度 - 图像学家研究出对RGB深浅的最好值
var grey = r * 0.3 + g * 0.59 + b * 0.11; // 这个算法是图像学家研究出对RGB深浅的最好值
imgData.data[n * 4] = grey;
imgData.data[n * 4 + 1] = grey;
imgData.data[n * 4 + 2] = grey;
}
return imgData;
}
</script>
</body>
</html>