feat: 高级切图设置与EXIF自适应；更新UI与README

README.md

@@ -4,11 +4,12 @@
 
 ## 功能特点
 
-- **多种布局**：支持 3x3 (九宫格), 2x2, 3x1, 1x3 等多种常见切图模式。
+- **多种布局**：支持 3x3 (九宫格), 2x2, 3x1, 1x3, 3x2, 2x3 等。
 - **高清无损**：后端采用 Python Pillow 库处理，保持原始图片画质。
 - **一键打包**：自动将切割后的图片打包成 ZIP 下载。
 - **隐私安全**：图片处理后立即释放，不保存任何用户数据。
 - **实时预览**：上传即可预览切割效果。
+- **高级设置**：支持正方形裁剪、统一切片尺寸、输出格式（PNG/JPEG/WEBP）、质量调节。
 
 ## 技术栈
 
@@ -16,6 +17,28 @@
 - **前端**: Vue 3, Tailwind CSS
 - **部署**: Docker, Hugging Face Spaces
 
+## 架构与技术实现（面试解读）
+
+- **整体架构**：
+  - 前端使用 Vue 3 组合式 API 管理状态与交互，Tailwind 构建响应式 UI。
+  - 后端 Flask 暴露两个路由：`/` 渲染页面；`/api/split` 处理图片并返回 ZIP。
+  - Docker 化部署到 Hugging Face Spaces，使用 `gunicorn` 作为生产 WSGI。
+- **核心算法**：
+  - 加载图片后进行 EXIF 自动旋转（`ImageOps.exif_transpose`）确保方向正确。
+  - 可选正方形中心裁剪，提升社交平台九宫格适配性。
+  - 两种切分策略：
+    - 非严格模式：最后一行/列吸收余数像素，避免丢失信息；
+    - 严格模式：居中裁剪为网格整倍数，保证所有切片尺寸完全一致。
+  - 输出支持 PNG/JPEG/WEBP，JPEG/WEBP 提供质量参数，并启用优化/渐进编码。
+- **性能与内存**：
+  - 以内存流创建 ZIP（`io.BytesIO` + `zipfile`），避免落盘 I/O。
+  - 限制上传大小为 16MB（`MAX_CONTENT_LENGTH`），减轻服务端压力。
+- **安全与隐私**：
+  - 无状态、即处理即返回，不持久化用户文件。
+  - Docker 镜像内使用非 root 用户（uid 1000）。
+- **可扩展性**：
+  - 前后端参数映射清晰，易于扩展更多布局或特效（如切片边框、留白）。
+
 ## 本地运行
 
 1. 克隆仓库

app.py

@@ -1,9 +1,8 @@
 import os
 import io
 import zipfile
-import uuid
 from flask import Flask, render_template, request, send_file, jsonify
-from PIL import Image
+from PIL import Image, ImageOps
 
 app = Flask(__name__)
 app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
@@ -25,20 +24,50 @@ def split_image():
         # Get parameters
         rows = int(request.form.get('rows', 3))
         cols = int(request.form.get('cols', 3))
+        out_format = (request.form.get('format') or '').upper()
+        quality = int(request.form.get('quality', 90))
+        square = request.form.get('square', 'false') == 'true'
+        strict_equal = request.form.get('strict_equal', 'false') == 'true'
         
         # Load image
         img = Image.open(file.stream)
+        # Auto-orient by EXIF if present
+        try:
+            img = ImageOps.exif_transpose(img)
+        except Exception:
+            pass
         
         # Convert to RGB if necessary (e.g. for RGBA/P images saving as JPEG)
         # But we'll try to keep original format if possible, or default to PNG/JPG
         format = img.format or 'PNG'
+        if out_format in ['JPEG', 'PNG', 'WEBP']:
+            format = out_format
         if format not in ['JPEG', 'PNG', 'WEBP']:
             format = 'PNG'
             
         # Calculate dimensions
         width, height = img.size
+        # Optional square crop (center)
+        if square:
+            side = min(width, height)
+            left = (width - side) // 2
+            top = (height - side) // 2
+            img = img.crop((left, top, left + side, top + side))
+            width, height = img.size
+
+        # Compute base tile size
         tile_width = width // cols
         tile_height = height // rows
+        if strict_equal:
+            # Crop to exact multiple to make all tiles equal
+            exact_w = tile_width * cols
+            exact_h = tile_height * rows
+            left = (width - exact_w) // 2
+            top = (height - exact_h) // 2
+            img = img.crop((left, top, left + exact_w, top + exact_h))
+            width, height = img.size
+            tile_width = width // cols
+            tile_height = height // rows
         
         # Create ZIP in memory
         memory_file = io.BytesIO()
@@ -51,17 +80,27 @@ def split_image():
                     right = left + tile_width
                     lower = upper + tile_height
                     
-                    # Handle last row/col to include remainder pixels
-                    if c == cols - 1:
-                        right = width
-                    if r == rows - 1:
-                        lower = height
+                    # Handle last row/col to include remainder pixels when not strict_equal
+                    if not strict_equal:
+                        if c == cols - 1:
+                            right = width
+                        if r == rows - 1:
+                            lower = height
                         
                     tile = img.crop((left, upper, right, lower))
                     
                     # Save tile to bytes
                     tile_bytes = io.BytesIO()
-                    tile.save(tile_bytes, format=format)
+                    save_kwargs = {}
+                    if format == 'JPEG':
+                        if tile.mode in ('RGBA', 'P'):
+                            tile = tile.convert('RGB')
+                        save_kwargs['quality'] = max(1, min(quality, 95))
+                        save_kwargs['optimize'] = True
+                        save_kwargs['progressive'] = True
+                    elif format == 'WEBP':
+                        save_kwargs['quality'] = max(1, min(quality, 95))
+                    tile.save(tile_bytes, format=format, **save_kwargs)
                     tile_bytes.seek(0)
                     
                     # Add to zip (1-based index)

static/js/app.js

@@ -6,6 +6,10 @@ createApp({
         const imageFile = ref(null);
         const loading = ref(false);
         const imageInfo = ref({ width: 0, height: 0 });
+        const outFormat = ref('PNG');
+        const quality = ref(90);
+        const square = ref(false);
+        const strictEqual = ref(false);
 
         const modes = [
             { label: '3 x 3 (九宫格)', rows: 3, cols: 3 },
@@ -25,6 +29,18 @@ createApp({
             };
         });
 
+        const estimatedTile = computed(() => {
+            let w = imageInfo.value.width;
+            let h = imageInfo.value.height;
+            if (square.value) {
+                const side = Math.min(w, h);
+                w = side; h = side;
+            }
+            const tw = Math.floor(w / currentMode.value.cols);
+            const th = Math.floor(h / currentMode.value.rows);
+            return { width: tw, height: th };
+        });
+
         const handleFileSelect = (event) => {
             const file = event.target.files[0];
             processFile(file);
@@ -75,6 +91,10 @@ createApp({
             formData.append('file', imageFile.value);
             formData.append('rows', currentMode.value.rows);
             formData.append('cols', currentMode.value.cols);
+            formData.append('format', outFormat.value);
+            formData.append('quality', quality.value);
+            formData.append('square', square.value ? 'true' : 'false');
+            formData.append('strict_equal', strictEqual.value ? 'true' : 'false');
 
             try {
                 const response = await fetch('/api/split', {
@@ -112,7 +132,12 @@ createApp({
             modes,
             currentMode,
             gridStyle,
+            estimatedTile,
             imageInfo,
+            outFormat,
+            quality,
+            square,
+            strictEqual,
             handleFileSelect,
             handleDrop,
             selectMode,

templates/index.html

@@ -85,6 +85,42 @@
                         </div>
                     </div>
 
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <label class="block text-sm font-medium text-gray-700 mb-3">高级设置</label>
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between">
+                                <span class="text-sm text-gray-600">正方形裁剪</span>
+                                <label class="inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" class="sr-only peer" v-model="square">
+                                    <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 relative transition">
+                                        <div class="absolute bg-white w-5 h-5 rounded-full top-0.5 left-0.5 transition peer-checked:left-5 shadow"></div>
+                                    </div>
+                                </label>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-sm text-gray-600">统一切片尺寸</span>
+                                <label class="inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" class="sr-only peer" v-model="strictEqual">
+                                    <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 relative transition">
+                                        <div class="absolute bg-white w-5 h-5 rounded-full top-0.5 left-0.5 transition peer-checked:left-5 shadow"></div>
+                                    </div>
+                                </label>
+                            </div>
+                            <div>
+                                <label class="text-sm text-gray-600">输出格式</label>
+                                <select v-model="outFormat" class="mt-1 w-full border rounded-md px-2 py-1 text-sm">
+                                    <option value="PNG">PNG（无损，体积较大）</option>
+                                    <option value="JPEG">JPEG（高兼容，质量可调）</option>
+                                    <option value="WEBP">WEBP（体积小，质量可调）</option>
+                                </select>
+                            </div>
+                            <div v-if="outFormat !== 'PNG'">
+                                <label class="text-sm text-gray-600">质量（{{ quality }}）</label>
+                                <input type="range" min="50" max="95" v-model="quality" class="w-full">
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="bg-gray-50 p-4 rounded-lg">
                         <h4 class="font-medium text-gray-700 mb-2">预览信息</h4>
                         <p class="text-sm text-gray-500 flex justify-between">
@@ -95,6 +131,10 @@
                             <span>切片数量:</span>
                             <span>{{ currentMode.rows * currentMode.cols }} 张</span>
                         </p>
+                        <p class="text-sm text-gray-500 flex justify-between mt-1">
+                            <span>预计单片尺寸:</span>
+                            <span>{{ estimatedTile.width }} x {{ estimatedTile.height }}</span>
+                        </p>
                     </div>
 
                     <div class="flex flex-col gap-3">