使用缩略图优化了网络传输速度与流量消耗

file.py

@@ -1,5 +1,6 @@
-import shutil, os, configparser, zipfile
+import shutil, os, configparser, zipfile, io
 import db
+from PIL import Image
 
 config = configparser.ConfigParser()
 config.read("./conf/app.ini")
@@ -20,7 +21,9 @@ def auotLoadFile():
         if zipfile.is_zipfile(
             config.get("file", "inputdir") + "/" + item
         ):  # 判断是否为压缩包
-            with zipfile.ZipFile(config.get("file", "inputdir") + "/" + item, "r") as zip_ref:
+            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,
@@ -47,7 +50,7 @@ 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", ""
 
@@ -62,3 +65,25 @@ def raedZip(bookid: str, index: int):
         return "Bad ZipFile", ""
     except Exception as e:
         return str(e), ""
+
+
+def thumbnail(input,size=(400,800)):
+    im = Image.open(io.BytesIO(input))
+    del input
+    im = im.convert('RGB')
+    im.thumbnail(size)
+    output_io = io.BytesIO()
+    im.save(output_io,format='WEBP')
+    output_io.seek(0)
+    return output_io
+
+def imageToWebP(input):
+    im = Image.open(io.BytesIO(input))
+    del input
+    im = im.convert('RGB')
+    output_io = io.BytesIO()
+    im.save(output_io,format='WEBP')
+    output_io.seek(0)
+    return output_io
+    
+    

main.py

@@ -65,13 +65,18 @@ def img(bookid, index):  # 图片接口
     if request.cookies.get("islogin") is None:
         return abort(403)
     if db.searchByid(bookid) == "":
-        return jsonify({'message': 'No ZIP file part'}), 400
+        return abort(404)
     # 设置响应类型为图片
     data, filename = file.raedZip(bookid,index)
+    if request.args.get("mini") == "yes":
+        data = file.thumbnail(data)
+    else:
+        data = file.imageToWebP(data)
     if isinstance(data, str):
         abort(404)
     response = make_response(data) #读取文件
-    response.headers.set('Content-Type', 'image/{}'.format(filename.split('.')[-1]))
+    del data
+    response.headers.set('Content-Type', 'image/Webp')
     response.headers.set('Content-Disposition', 'inline', filename=filename)
     return response
 

requirements.txt

@@ -1,2 +1,3 @@
 shortuuid
-flask
+flask
+Pillow

templates/overview.html

@@ -45,10 +45,6 @@
       cursor: pointer;
     }
 
-    .loading {
-      display: none;
-    }
-
     #imageContainer {
       display: none;
       justify-content: center;
@@ -73,18 +69,18 @@
   <div id="gallery">
     {% for item in list %}
     <div class="image-container">
-      <img src="/api/img/{{ item[1] }}/1" class="image" onclick="linkjump('{{ item[1] }}')" />
+      <img src="/api/img/{{ item[1] }}/1?mini=yes" class="image" onclick="linkjump('{{ item[1] }}')" />
       <span>{{ item[2] }}</span>
     </div>
     {% endfor %}
   </div>
   <div style="display:flex;justify-content: center; align-items:center;">
-    <div class="btn-group"" role=" toolbar" aria-label="Toolbar with button groups">
+    <div class="btn-group" role=" toolbar" aria-label="Toolbar with button groups">
       {% for item in lastPageList %}
       <button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button>
       {% endfor %}
     </div>
-    <div class="btn-group"" role=" group" aria-label="Second group">
+    <div class="btn-group" role=" group" aria-label="Second group">
       <button type="button" class="btn btn-info">{{pagenow}}</button>
     </div>
     <div class="btn-group" role="group" aria-label="Third group">

templates/view.html

@@ -60,7 +60,7 @@
                         comicContainer.appendChild(img);
                         currentImageIndex++;
                         // 添加延迟，以控制加载速度
-                        setTimeout(loadNextImage, 1000);
+                        setTimeout(loadNextImage, 500);
                     } else {
                         console.error('Error loading image:', response.statusText);
                     }