-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
65 lines (59 loc) · 2.03 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片库</title>
<style>
.gallery-img {
position: relative;
width: 800px;
display: inline-block;
margin: 10px;
}
.watermark {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-35%, -50%);
color: white;
background-color: rgba(0, 0, 0, 0);
padding: 2px;
font-size: 40px; /* 调整字体大小 */
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="gallery"></div>
<script>
fetch('https://pijiuya.github.io/PhotoRobot/image_list.json') // JSON文件的URL
.then(response => response.json())
.then(imageNames => {
const gallery = document.getElementById('gallery');
const basePath = './download_photo/'; // 图片存储的基础路径
imageNames.forEach(name => {
// 创建包含图片和水印的容器
const container = document.createElement('div');
container.classList.add('gallery-img');
// 创建图片元素
const img = new Image();
img.src = basePath + name; // 组合基础路径和图片文件名
// 创建水印
const watermark = document.createElement('div');
watermark.classList.add('watermark');
const imageNumber = name.match(/(\d{4})\.jpg$/)[1];
watermark.textContent = 'ID: ' + imageNumber;
// 添加元素到容器
container.appendChild(img);
container.appendChild(watermark);
// 添加容器到画廊
gallery.appendChild(container);
});
})
.catch(error => console.error('Error loading image list:', error));
</script>
</body>
</html>