预览功能实现

This commit is contained in:
Kakune55 2024-04-10 15:24:59 +08:00
parent 9b5e5707a3
commit 544ec6a08a
4 changed files with 92 additions and 9 deletions

11
db.py
View File

@ -16,7 +16,8 @@ def init():
CREATE TABLE IF NOT EXISTS Metadata (
num INTEGER PRIMARY KEY AUTOINCREMENT,
id TEXT NOT NULL,
filename TEXT NOT NULL
filename TEXT NOT NULL,
pagenumber INT NOT NULL
);
"""
)
@ -49,18 +50,18 @@ def searchByFilename(filename: str):
# 在数据库中添加一个新的文件记录
def newFile(filename: str):
def newFile(filename: str, pagenumber:int):
suuid = shortuuid.random(8)
conn = getConn()
c = conn.cursor()
c.execute(
"""
INSERT INTO Metadata
(id, filename)
(id, filename, pagenumber)
VALUES
(?, ?);
(?, ?, ?);
""",
(suuid, filename),
(suuid, filename, pagenumber),
)
conn.commit()
conn.close()

View File

@ -20,7 +20,8 @@ def auotLoadFile():
if zipfile.is_zipfile(
config.get("file", "inputdir") + "/" + item
): # 判断是否为压缩包
db.newFile(item) # 添加数据库记录 移动到存储
with zipfile.ZipFile(config.get("file", "inputdir") + "/" + item, "r") as zip_ref:
db.newFile(item, len(zip_ref.namelist())) # 添加数据库记录 移动到存储
shutil.move(
config.get("file", "inputdir") + "/" + item,
config.get("file", "storedir") + "/" + item,
@ -47,6 +48,9 @@ def raedZip(bookid: str, index: int):
if not image_files:
return "not imgfile in zip", ""
if int(index) > len(image_files):
return "404 not found", ""
# 假设我们只提取图片文件
image_filename = image_files[int(index)]

View File

@ -60,8 +60,8 @@ def img(bookid, index): # 图片接口
return jsonify({'message': 'No ZIP file part'}), 400
# 设置响应类型为图片
data, filename = file.raedZip(bookid,index)
if data is str:
return data
if isinstance(data, str):
abort(404)
response = make_response(data) #读取文件
response.headers.set('Content-Type', 'image/{}'.format(filename.split('.')[-1]))
response.headers.set('Content-Disposition', 'inline', filename=filename)
@ -72,7 +72,7 @@ def img(bookid, index): # 图片接口
def book(bookid): # 接口
if request.cookies.get("islogin") is None:
return abort(403)
return bookid
return render_template("view.html",data = bookid)
@app.route("/view/<bookid>")

78
templates/view.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漫画详情页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
#comic-container {
display: flex;
flex-direction: column;
align-items: center;
}
.comic-image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="comic-container"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const comicId = getComicIdFromURL();
if (comicId) {
displayComic(comicId);
} else {
console.error('No comic ID found in URL');
}
});
// 从当前URL中获取漫画ID
function getComicIdFromURL() {
const urlParts = window.location.pathname.split('/');
return urlParts[2]; // 第三部分是漫画ID
}
// 显示漫画
function displayComic(comicId) {
let currentImageIndex = 1;
const comicContainer = document.getElementById('comic-container');
function loadNextImage() {
const imageUrl = `/api/img/${comicId}/${currentImageIndex}`;
fetch(imageUrl)
.then(response => {
if (response.ok) {
const img = document.createElement('img');
img.src = imageUrl;
img.classList.add('comic-image');
comicContainer.appendChild(img);
currentImageIndex++;
// 添加延迟,以控制加载速度
setTimeout(loadNextImage, 1000);
} else {
console.error('Error loading image:', response.statusText);
}
})
.catch(error => {
console.error('Error loading image:', error);
});
}
// 加载第一张图片
loadNextImage();
}
</script>
</body>
</html>