-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy path022.证书生成器.html
288 lines (254 loc) · 9.18 KB
/
022.证书生成器.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
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!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">
<link rel="stylesheet" href="./assets/global.css">
<style>
.preview {
position: relative;
display: inline-block;
}
img {
width: 768px;
}
.name,
.detail,
.date,
.orgs,
.colon {
position: absolute;
font-family: "Microsoft YaHei"
}
.name {
top: 183px;
left: 102px;
width: 255px;
font-size: 27px;
line-height: 36px;
background-color: transparent;
border-bottom-width: 2px;
border-bottom-color: #999;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
text-align: center;
outline: none;
}
.colon {
top: 190px;
left: calc(107px + 255px);
font-size: 27px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.detail {
top: 237px;
left: 94px;
height: 90px;
width: 559px;
background-color: transparent;
resize: none;
border: none;
font-size: 22px;
letter-spacing: 4px;
outline: none;
text-indent: 50px;
}
.date {
top: 432px;
right: 130px;
font-size: 14px;
line-height: 36px;
background-color: transparent;
border: none;
outline: none;
}
.orgs {
top: 356px;
right: 147px;
width: 180px;
background-color: transparent;
resize: none;
border: none;
font-size: 14px;
outline: none;
text-align: justify;
height: 80px;
}
</style>
</head>
<body>
<div class="preview">
<img src="./assets/certificate-1.jpg">
<input class="name" type="text" placeholder="获奖人" />
<span class="colon">:</span>
<textarea class="detail" placeholder="获奖成就"></textarea>
<textarea class="orgs" placeholder="颁发机构"></textarea>
<input class="date" type="text" placeholder="获奖日期" />
</div>
<canvas id="seal" width="200" height="200" style="opacity: 0;"></canvas>
<canvas id="preview" width="768" height="531"></canvas>
<script>
let certificate = document.getElementsByTagName('img').item(0);
/**
* 印章的生成
*/
function seal(s) {
// 防止转圈圈
if (!s) return;
let c = document.getElementById("seal");
let ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);
ctx.fillStyle = "rgb(196,38,29)";
ctx.strokeStyle = "rgb(196,38,29)";
// 印章的外框
ctx.beginPath();
ctx.lineWidth = 4;
ctx.arc(100, 100, 96, 0, 2 * Math.PI);
ctx.stroke();
// 星星的生成
ctx.beginPath();
ctx.lineWidth = 1;
let star_start_x = 76;
let star_start_y = 88;
ctx.moveTo(star_start_x, star_start_y)
ctx.lineTo(star_start_x + 20, star_start_y)
ctx.lineTo(star_start_x + 20 + 7, star_start_y - 20)
ctx.lineTo(star_start_x + 20 + 7 + 6, star_start_y)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20, star_start_y)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5, star_start_y + 13 + 20)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16, star_start_y + 20)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18, star_start_y + 13 + 20)
ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18 + 6, star_start_y + 13)
ctx.closePath()
ctx.fill();
// 印章上旋转的文字
ctx.translate(100, 100);
ctx.font = '26px Helvetica';
let angle = 4 * Math.PI / (3 * (s.length - 1));
for (var i = 0; i < s.length; i++) {
let c = s[i];
if (i == 0) ctx.rotate(.8 * Math.PI);
else ctx.rotate(angle);
ctx.save();
ctx.translate(70, 0);
ctx.rotate(Math.PI / 2);
ctx.fillText(c, 0, 5);
ctx.restore();
}
// 归位
ctx.rotate(-angle * (s.length - 1));
ctx.rotate(-.8 * Math.PI);
ctx.translate(-100, -100);
return c.toDataURL()
}
// 预览
function preview(name, detail, orgs, date) {
let c = document.getElementById("preview");
let ctx = c.getContext("2d");
console.log(certificate);
// 证书背景
ctx.drawImage(certificate, 0, 0, c.clientWidth, c.clientHeight);
console.log("certificate.onload");
// 获奖人
ctx.font = "22px Microsoft YaHei";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillText(name, 102 + 255 / 2, 183);
// 冒号
ctx.textAlign = "right";
ctx.fillText(":", 102 + 255, 183);
// 获奖人底线
ctx.beginPath();
ctx.moveTo(102, 220)
ctx.lineTo(102 + 245, 220)
ctx.stroke();
// 获奖成就
let detailX = 147;
let detailY = 237;
ctx.font = "22px Microsoft YaHei";
ctx.textAlign = "left";
ctx.textBaseline = "top";
for (let i = 0; i < detail.length; i++) {
detailX += 32;
if (detailX > 640) {
detailX = 115;
detailY += 32;
}
ctx.fillText(detail[i], detailX, detailY);
if (detail.charCodeAt(i) <= 255) detailX -= 16
}
// 颁发机构
let orgX = c.clientWidth - 147 - 180;
let orgY = 356
ctx.font = "14px Microsoft YaHei";
ctx.textAlign = "left";
ctx.textBaseline = "top";
let orgArr = orgs.split(/\n/).map(o => o.trim());
for (let i = 0; i < orgArr.length; i++) {
ctx.fillText(orgArr[i], orgX, orgY);
orgY += 30;
let img = new Image();
img.src = seal(orgArr[i]);
img.onload = function () {
ctx.drawImage(img, c.clientWidth - 220 - i * 110, 350, 100, 100);
}
}
// 绘制获奖日期
ctx.font = "14px Microsoft YaHei";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText(date, c.clientWidth - 130 - 153, 450);
}
let timeoutId = null;
let nameDom = document.querySelector('.name');
let detailDom = document.querySelector('.detail');
let orgsDom = document.querySelector('.orgs');
let dateDom = document.querySelector('.date');
nameDom.addEventListener('input', checkPreview)
detailDom.addEventListener('input', checkPreview)
orgsDom.addEventListener('input', checkPreview)
dateDom.addEventListener('input', checkPreview)
// 检查是否需要渲染
function checkPreview() {
let name = nameDom.value;
let detail = detailDom.value;
let orgs = orgsDom.value;
let date = dateDom.value;
clearTimeout(timeoutId);
// 允许渲染
if (name.trim() && detail.trim() && orgs.trim() && date.trim()) {
timeoutId = setTimeout(() => {
console.log("渲染");
console.log(name, detail, orgs, date);
preview(name, detail, orgs, date)
}, 1000);
}
}
// 示例
function sample() {
nameDom.value = `林一怂儿`;
detailDom.textContent = "在2021年全国优秀文章中，你以优秀的错别字数量，以及非常离谱的Bug，遥遥领先。特发此证，以资鼓励。";
orgsDom.textContent = `全国文章错别字核查中心\n全国离谱到家委员会`
dateDom.value = "2021年12月"
checkPreview()
}
let previewDom = document.getElementById("preview");
// 下载
function download() {
let a = document.createElement('a');
a.href = previewDom.toDataURL();
a.download = "荣誉证书.png";
a.click();
}
previewDom.addEventListener('click', this.download)
certificate.onload = function () {
sample();
}
</script>
</body>
</html>