forked from TransparentLC/WechatMomentScreenshot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.src.html
558 lines (536 loc) · 40.7 KB
/
index.src.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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
<!DOCTYPE HTML>
<html>
<head>
<title>朋友圈转发截图生成工具</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="author" content="TransparentLC">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="Cache-Control" content="no-transform">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1/dist/css/mdui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot@8092d732c140378a811b5531bb80e9eab596e060/style.min.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script><script>eruda.init()</script> -->
<script>new URL(location.href).searchParams.has("debug")&&(document.write(atob('PHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZXJ1ZGEiPjwvc2NyaXB0PjxzY3JpcHQ+ZXJ1ZGEuaW5pdCgpPC9zY3JpcHQ+')))</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-appbar-with-toolbar">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-typo-title">朋友圈转发截图生成工具</span>
<div class="mdui-toolbar-spacer"></div>
<a class="mdui-btn mdui-btn-icon" mdui-dialog="{target:'#about'}" mdui-tooltip="{content:'关于'}"><i class="mdui-icon material-icons">info_outline</i></a>
<a id="sourceRepo" href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content:'查看 GitHub'}">
<svg viewBox="0 0 36 36" class="mdui-icon" style="width:24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z" />
</svg>
</a>
</div>
</header>
<div class="mdui-container">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configName" class="mdui-textfield-input" type="text" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configAvatar').click();">选择头像</button>
<input id="configAvatar" type="file" style="display:none" />
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">正文</label>
<textarea id="configText" class="mdui-textfield-input"></textarea>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">截图类型</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeText" type="radio" name="group" checked />
<i class="mdui-radio-icon"></i>纯文字
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeWebsite" type="radio" name="group" />
<i class="mdui-radio-icon"></i>分享网页/公众号文章
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeSingleImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片（单张）
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeMultiImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片（九宫格）
</label>
</div>
</div>
<div id="configWebsite" style="display: none;">
<div class="mdui-textfield">
<label class="mdui-textfield-label">网页标题</label>
<input id="configArticleTitle" class="mdui-textfield-input" type="text" value="还不会用Google的你，就要被时代淘汰了" />
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripplet mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configArticleIcon').click();">上传网页图标</button>
<input id="configArticleIcon" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="getArticleInfo();">自动获取公众号文章标题/封面图</button>
</div>
</div>
</div>
<div id="configSingleImage" style="display: none;">
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetSingleImage').click();">上传图片</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="addPlayIcon()">添加视频播放图标</button>
</div>
</div>
<input id="configSetSingleImage" type="file" style="display:none" />
</div>
<div id="configMultiImage" style="display: none;">
<div class="mdui-m-y-1">请按图片 1 - 9 的顺序添加图片～<br>如果只需要显示一张图片，建议选择“图片（单张）”。</div>
<div class="mdui-row">
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage1').click();">上传图片 1</button>
<input id="configSetMultiImage1" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage2').click();">上传图片 2</button>
<input id="configSetMultiImage2" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage3').click();">上传图片 3</button>
<input id="configSetMultiImage3" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage4').click();">上传图片 4</button>
<input id="configSetMultiImage4" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage5').click();">上传图片 5</button>
<input id="configSetMultiImage5" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage6').click();">上传图片 6</button>
<input id="configSetMultiImage6" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage7').click();">上传图片 7</button>
<input id="configSetMultiImage7" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage8').click();">上传图片 8</button>
<input id="configSetMultiImage8" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage9').click();">上传图片 9</button>
<input id="configSetMultiImage9" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-12">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="clearMultiImage();">清空所有图片</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">定位</label>
<input id="configLocation" class="mdui-textfield-input" type="text" value="" />
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">转发出处</label>
<input id="configApp" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">设置为“视频号 · ○○○”时将以链接的浅蓝色显示</div>
</div>
<div class="mdui-row">
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">发表日期</label>
<input id="configPostDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">发表时间</label>
<input id="configPostTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configPostTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">截图日期</label>
<input id="configScreenshotDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">截图时间</label>
<input id="configScreenshotTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configScreenshotTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-4 mdui-col-sm-6">
<label class="mdui-textfield-label">点赞数</label>
<input id="configLike" class="mdui-textfield-input" type="number" min="0" />
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label">图片长度</label>
<input id="configHeight" class="mdui-textfield-input" type="number" value="1920" min="1920" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-tooltip="{content:'图片宽度默认为 1080 像素，长度根据设备长宽比确定计算，可能和实际存在偏差'}" onclick="document.getElementById('configHeight').value = Math.round(document.body.clientHeight / document.body.clientWidth * 1080);">自动设定</button>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-8 mdui-col-sm-10">
<label class="mdui-textfield-label">自定义头像库</label>
<input id="configAvatarSet" class="mdui-textfield-input" type="text" list="presetAvatarSet" />
<datalist id="presetAvatarSet">
<option value="https://i.akarin.dev/wms-avatar/avatar-stable.txt">
<option value="https://i.akarin.dev/wms-avatar/avatar-fast.txt">
</datalist>
<div class="mdui-textfield-helper">高级功能，点击<a href="javascript:;" class="mdui-text-color-theme-accent" mdui-dialog="{target:'#aboutAvatarSet'}">这里</a>查看详细说明</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="xhrGet(document.getElementById('configAvatarSet').value || 'https://i.akarin.dev/wms-avatar/avatar-stable.txt', function (result) {loadAvatarSet(result, true); config.avatarSet = document.getElementById('configAvatarSet').value})">应用</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论区</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">
<label class="mdui-checkbox">
<input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList[this.checked ? 'remove' : 'add']('mdui-hidden');" />
<i class="mdui-checkbox-icon"></i>
显示评论区
</label>
</div>
<div id="configCommentPreview" class="mdui-col-xs-12 mdui-hidden">
<div class="mdui-table-fluid mdui-m-y-2">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>评论内容</th>
<th>时间</th>
</tr>
</thead>
<tbody id="configCommentList">
</tbody>
</table>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-dialog="{target:'#addComment'}" onclick="document.getElementById('configCommentName').value = randomName(); document.getElementById('configCommentAvatar').value = null;">添加评论</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="removeComment()">删除评论</button>
</div>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">通知栏</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons" />
<i class="mdui-checkbox-icon"></i>
显示 APP 图标
</label>
</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" />
<i class="mdui-checkbox-icon"></i>
随机信号和电量
</label>
</div>
<div class="mdui-col-xs-12 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarIos" type="checkbox" name="configTopBarIos" />
<i class="mdui-checkbox-icon"></i>
使用 iOS 的样式（以上两项不可用）
</label>
</div>
<div class="mdui-col-xs-8 mdui-col-sm-10">
<label class="mdui-checkbox">
<input id="configTopBarCustom" type="checkbox" name="configTopBarIos" />
<i class="mdui-checkbox-icon"></i>
使用自定义通知栏图片
</label>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configTopBarCustomImage').click();">选择图片</button>
<input id="configTopBarCustomImage" type="file" style="display:none" />
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">其他</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configUIWhite" type="checkbox" name="configUIWhite" />
<i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configFirstAvatar" type="checkbox" name="configFirstAvatar" />
<i class="mdui-checkbox-icon"></i>第一个头像固定为自己
</label>
</div>
</div>
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="window.open('https://i.akarin.dev/donate/')">请小透明喝一瓶肥宅快乐水～(*´∀`)</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="copyGitLink()">复制本工具的链接，分享给有需要的人(`ヮ´ )</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="localStorage.removeItem('config');localStorage.removeItem('avatar');mdui.snackbar({message:'已清除～刷新后将使用默认设置'})">清除保存的设置信息</button>
<div id="gitLink" style="display:none">https://git.io/WMS</div>
<div id="fakeWechatMoment">
<div id="topBar" class="topBar">
<div id="topBarAppIcons"></div>
<div style="flex-grow:1"></div>
<img id="topBarIconWifi" class="topBarIcon" />
<img id="topBarIconSignal" class="topBarIcon" />
<img id="topBarIconBattery" class="topBarIcon" />
<span id="topBarTime"></span>
</div>
<div id="topBarIos" class="topBarIos">
<span id="topBarTimeIos"></span>
<div style="flex-grow:1"></div>
<img id="topBarIconIos" class="topBarIcon" />
</div>
<div id="topBarCustom">
<img id="topBarCustomImage" style="width:100%" />
</div>
<div id="header" class="header">
<img style="width:28px;height:48px" />
<div style="flex-grow:1;text-align:center">详情</div>
<div style="width:28px;transform:scaleX(-100%)">···</div>
</div>
<div id="main" class="main">
<div style="height:30px"></div>
<div class="avatarOut">
<div id="avatar" class="avatarIn squareImage"></div>
</div>
<div class="content">
<div id="name" class="name"></div>
<div style="height:11px"></div>
<div id="text" class="text"></div>
<div id="article" class="article" style="display:none">
<div id="articleIcon" class="articleIcon squareImage" style="background-image:url(data:image/png;base64,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)"></div>
<div id="articleTitle" class="articleTitle"></div>
</div>
<div id="singleImage" class="singleImage" style="display:none">
<img id="image" class="image" src="https://ae01.alicdn.com/kf/HTB13rXuJCzqK1RjSZPxq6A4tVXae.jpg" />
</div>
<div id="multiImage" class="multiImage" style="display:none">
<div id="image1" class="multiImageBox squareImage"></div>
<div id="image2" class="multiImageBox squareImage"></div>
<div id="image3" class="multiImageBox squareImage"></div>
<div id="image4" class="multiImageBox squareImage"></div>
<div id="image5" class="multiImageBox squareImage"></div>
<div id="image6" class="multiImageBox squareImage"></div>
<div id="image7" class="multiImageBox squareImage"></div>
<div id="image8" class="multiImageBox squareImage"></div>
<div id="image9" class="multiImageBox squareImage"></div>
</div>
<div style="height:20px"></div>
<div class="info">
<span id="location" style="color:#576b95"></span>
<div style="height:20px"></div>
<span id="time"></span>
<svg viewBox="0 0 24 24" style="width:40px;height:40px;transform:translateY(4px)" fill="#576b95">
<path d="M15.4117646,4.50000215 L14.6107386,18.117444 C14.5485547,19.1745693 13.6731425,20 12.6141898,20 L5.38581016,20 C4.32685754,20 3.45144525,19.1745693 3.38926141,18.117444 L2.58823542,4.50000215 L0.5,4.50000215 L0.5,3.5 C0.5,3.22385763 0.723857625,3 1,3 L17,3 C17.2761424,3 17.5,3.22385763 17.5,3.5 L17.5,4.50000215 L15.4117646,4.50000215 Z M7,0.500034106 L11,0.500034106 C11.2761424,0.500034106 11.5,0.723891731 11.5,1.00003411 L11.5,2 L6.5,2 L6.5,1.00003411 C6.5,0.723891731 6.72385763,0.500034106 7,0.500034106 Z M6,6.99998133 L6.5,15.9999943 L8,15.9999943 L7.60000038,6.99998133 L6,6.99998133 Z M10.5,6.99998133 L10,15.9999943 L11.5,15.9999943 L12,6.99998133 L10.5,6.99998133 Z" />
</svg>
</div>
<img style="position:relative;display:inline-block;width:auto;height:42px;top:9px" />
</div>
<div style="height:50px"></div>
<div id="like" class="like">
<img src="like.svg" width="32" height="32" style="position: relative; left: 30px; top: 43px; display: inline-block; vertical-align: top;" />
<div id="likeAvatarList" class="likeAvatarList"></div>
<div style="height:17px"></div>
</div>
<div id="comment" class="like" style="margin-top:1px">
<img src="commentlist.svg" width="32" height="32" style="position: relative; left: 30px; top: 45px; display: inline-block; vertical-align: top;" />
<div id="commentList" class="likeAvatarList"></div>
</div>
</div>
<div id="footer" class="footer">
<div class="commentInput">评论</div>
<div style="width:22px;display:inline-block"></div>
<img style="width:88px!important;height:88px!important" />
<div style="width:40px;display:inline-block"></div>
<div class="commentSend">发送</div>
</div>
</div>
<div id="aboutFooter" class="mdui-m-y-2" style="text-align:center;line-height:1.5em">
<a id="aboutFooterBadge" href="https://github.com/TransparentLC/WechatMomentScreenshot" target="_blank" style="text-decoration:none"><img src="https://img.shields.io/github/stars/TransparentLC/WechatMomentScreenshot.svg?style=social"></a>
<br>
<span class="mdui-typo-caption-opacity">© 2023 ✨小透明・宸✨</span>
</div>
<div id="addComment" class="mdui-dialog">
<div class="mdui-dialog-title">添加评论</div>
<div class="mdui-dialog-content mdui-typo">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configCommentName" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">默认的名字是随机生成的，未选择头像则会随机抽取一个头像。</div>
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configCommentAvatar').click();">上传头像</button>
<input id="configCommentAvatar" type="file" style="display: none;" />
</div>
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论内容</label>
<textarea id="configCommentText" class="mdui-textfield-input"></textarea>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">评论日期</label>
<input id="configCommentDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">评论时间</label>
<input id="configCommentTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">回复给……（可选）</label>
<textarea id="configCommentReply" class="mdui-textfield-input"></textarea>
</div>
</div>
</div>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="var avatarSrc = document.getElementById('configCommentAvatar').files[0] ? window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]) : avatarURL[Math.floor(Math.random() * avatarURL.length)]; var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(avatarSrc, document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate, document.getElementById('configCommentReply').value);">OK</button>
</div>
</div>
<div id="generatedPopup" class="mdui-dialog">
<div class="mdui-dialog-title">生成完毕| ω・`)</div>
<img id="generated" />
<div class="mdui-typo-caption-opacity mdui-m-y-2">
<p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作( ﾟ 3ﾟ)</p>
<p>当前使用的头像与设置已保存到本地<br>下次打开本工具将自动读取～</p>
</div>
<div class="mdui-dialog-actions">
<a id="save" class="mdui-btn mdui-ripple">保存</a>
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
</div>
</div>
<div id="about" class="mdui-dialog">
<div class="mdui-dialog-title">关于</div>
<div class="mdui-dialog-content mdui-typo">
<h4>这个小工具是什么？</h4>
一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。
<h4>为什么生成的截图和我在手机上截的不一样？能不能做出 iOS 的样式？</h4>
不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）
<br>
如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……
<br>
2023.5.8 更新：iOS 的样式已经添加了，不过因为我并没有 iOS 设备，所以只能参考网上找到的截图来写样式，<strong>不一定能做到和实机一样</strong>。
<br>
2023.6.14 更新：已经添加了使用自定义通知栏图片的选项。可以自行在手机上截图并裁剪出通知栏部分，然后使它出现在生成的截图上。
<h4>能不能生成纯文字/转发图片的截图？</h4>
<del>懒得写样式，心情好的时候再加上～(*´ω`*)</del>
<br>
已经可以生成啦～
<h4>生成图片后点击“保存”没有反应？</h4>
也可以试试长按图片手动另存为呢( ﾟ 3ﾟ)
<h4>开源就是好</h4>
<ul>
<li>
<a href="https://html2canvas.hertzen.com">html2canvas</a> 开源许可：<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://www.mdui.org">MDUI</a> 开源许可：<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://github.com/google/material-design-icons">Material Design icons</a> 开源许可：<a href="https://github.com/google/material-design-icons/blob/master/LICENSE">Apache License 2.0</a>
</li>
<li>
<a href="https://www.iconfont.cn">Iconfont 阿里巴巴矢量图标库</a>
</li>
</ul>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="aboutAvatarSet" class="mdui-dialog">
<div class="mdui-dialog-title">“自定义头像库”的说明</div>
<div class="mdui-dialog-content mdui-typo">
<p>如果你希望在生成的截图的点赞区域中显示自定义的头像，可以按照以下步骤操作：</p>
<ol>
<li>收集你想要的头像，并上传到图床之类的地方。</li>
<li>将这些头像的 URL 以一行一个的格式保存为纯文本，以下是示例。</li>
<pre><code>https://example.com/avatar-0.jpg
https://example.com/avatar-1.jpg
https://example.com/avatar-2.jpg
...</code></pre>
<li>将这个文本文件上传到某个地方，例如自己的网站上，也可以按照这一格式动态生成头像库的内容，总之需要使头像库也能通过 URL 访问到。</li>
<li>在“自定义头像库”中输入头像库的 URL，点击“应用”后会进行读取，之后在生成截图时就会从头像库抽取头像了。</li>
<li>头像和头像库都需要支持跨域访问（响应头 <code>Access-Control-Allow-Origin: *</code>）</li>
</ol>
<p>这个功能有一定的技术门槛，因此并不能保证每个人都有条件使用这一功能。留空后点击“应用”将会使用默认头像库。</p>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="request" class="mdui-dialog">
<div id="requestResult" class="mdui-dialog-title"></div>
<div id="requestResultContent" class="mdui-dialog-content mdui-typo"></div>
<div class="mdui-dialog-actions">
<button id="requestAction" class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/html2canvas@1/dist/html2canvas.min.js,npm/mdui@1/dist/js/mdui.min.js,gh/TransparentLC/WechatMomentScreenshot@5f8a41ad0c6acac1a94e9793e58820584389f529/main.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/mdui@1/dist/js/mdui.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script> -->
<!-- <script src="main.js"></script> -->
</body>
</html>