-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (115 loc) · 7.48 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相册截图工具</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<div class="container">
<h1>相册截图工具</h1>
<div id="dropArea">点击此处，导入文件夹</div>
<input type="file" id="fileInput" accept="image/*" webkitdirectory multiple style="display:none;">
<details id="about" class="centered">
<summary>更多信息</summary>
<div class="content">
<h3>这个网站是做什么的？</h3>
<p>点击页面上方的虚线框区域，上传一个本地文件夹，网站会将文件夹中的图片以网格布局进行排列显示，之后你可以点击截图按钮，一键保存截图。网站还提供了一些简单的参数选项，可以调整页面图片显示列数、每张图片间距等，还支持调整截图保存的文件格式。我推荐使用 Webp 图片格式，同样是无损格式，它的文件体积比 PNG 更小，目前各个平台也支持了 Webp 格式使用。</p>
<h3>为什么需要这个？</h3>
<p>因工作原因，在处理作品图片类征集活动时，需要将所有图片进行截图，生成它们的预览小图。之前是通过 Microsoft Store 应用商店的 Pictureflect Photo Viewer Pro 看图工具，有个很干净的 Grid 网格视图，再通过 FastStone Capture 截图工具，具有滚动长截图功能，然后将作品分成若干个文件夹，分开截图，再使用 Photopshop 进行切片导出。虽然这在某种程度上已经很方便了，但总就免不了许多体力活。我希望更偷懒点，更自动化一些。于是，就有了这个~</p>
<h3>我的数据是保密的吗？</h3>
<p>是的，你操作的文件不会离开你的电脑。这些文件不会被其他任何人访问到，此页面提供的链接也只能在您本地生效，它只为你工作，加载过程中也没有任何东西通过网络进行传输。 </p>
<h3>这网站是谁做的？</h3>
<p>你好，我是<a href="https://github.com/XHXIAIEIN">XHXIAIEIN</a>，是一名独立游戏开发者，使用 <a href="https://www.construct.net/a/260259?t=construct3">Construct 3</a> 引擎开发游戏。</p>
<h3>版本记录</h3>
<p>最后更新日期: 2024-06-07</p>
</div>
</details>
<div id="configPanel">
<div class="configGroup">
<label>每列显示:<input type="number" id="columns" value="4" min="1"></label>
<label>单张截图行数:<input type="number" id="rows" value="6" min="1"></label>
<label>
排序:
<select id="sortOrder">
<optgroup label="基础">
<option value="nameAsc">名称 (A-Z)</option>
<option value="nameDesc">名称 (Z-A)</option>
<option value="dateAsc">最后修改时间 (最早优先)</option>
<option value="dateDesc">最后修改时间 (最近优先)</option>
</optgroup>
<optgroup label="更多">
<option value="sizeAsc">大小 (更小优先)</option>
<option value="sizeDesc">大小 (更大优先)</option>
<option value="typeAsc">类型 (A-Z)</option>
<option value="typeDesc">类型 (Z-A)</option>
</optgroup>
<optgroup label="图像">
<option value="widthAsc">宽度 (更小优先)</option>
<option value="widthDesc">宽度 (更大优先)</option>
<option value="heightAsc">高度 (更小优先)</option>
<option value="heightDesc">高度 (更大优先)</option>
</optgroup>
<optgroup label="比例">
<option value="aspectRatioAsc">宽高比 (高度优先)</option>
<option value="aspectRatioDesc">宽高比 (宽度优先)</option>
<option value="resolutionAsc">分辨率 (更小优先)</option>
<option value="resolutionDesc">分辨率 (更大优先)</option>
</optgroup>
</select>
</label>
<label>
图片对齐:
<select id="imageAlignment">
<option value="flex-start">顶部</option>
<option value="center">居中</option>
<option value="flex-end">底部</option>
</select>
</label>
<label>截图最大宽度:<input type="number" id="maxWidth" value="1200" min="100"></label>
<label>截图背景色:<input type="color" id="bgColor" value="#000000"></label>
</div>
<div id="configAdvanced">
<details>
<summary>高级设置</summary>
<div class="configGroup">
<label>图片间距:<input type="number" id="columnGap" value="2" min="0"></label>
<label>图片行距:<input type="number" id="rowGap" value="2" min="0"></label>
<label>页面左右边距:<input type="number" id="paddingX" value="2" min="0"></label>
<label>页面上下边距:<input type="number" id="paddingY" value="2" min="0"></label>
<label>图片圆角:<input type="number" id="imageBorderRadius" value="0" min="0"></label>
<label>页面圆角:<input type="number" id="pageBorderRadius" value="0" min="0"></label>
<label>截图超过数量打包下载:<input type="number" id="fileThreshold" value="5" min="1"></label>
<label>
格式
<select id="imageFormat">
<option value="webp">WebP</option>
<option value="png">PNG</option>
<option value="jpg">JPG</option>
<option value="avif">AVIF</option>
</select>
</label>
<label>
质量 (仅对 JPG 和 AVIF 有效):
<input type="range" id="imageQuality" min="0" max="100" value="100">
</label>
</div>
</details>
</div>
</div>
<div id="progressContainer">
<p id="progressText"></p>
<div id="linksContainer"></div>
</div>
<button id="captureButton">生成截图</button>
<div id="photoWallContainer">
<div id="photoWall"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>