Merge pull request #2 from zhiweio/feture/update

.dockerignore

@@ -0,0 +1,12 @@
+.github/
+.idea/
+.vscode/
+dist/
+node_modules/
+src-wasm/target/
+.git/
+*.md
+LICENSE
+stats.html
+vercel.json
+.dockerignore

.github/workflows/docker-build.yml

@@ -0,0 +1,34 @@
+name: Docker Build and Push
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: The version to build
+
+  push:
+    tags:
+      - '*.*'
+      - '*.*.*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Docker Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKER_USERNAME }}/picseal:latest

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:22 AS build
+
+RUN useradd -m picseal
+
+USER picseal
+
+ENV HOME=/home/picseal
+
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+
+ENV PATH="$HOME/.cargo/bin:$PATH"
+
+RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+
+WORKDIR /app
+
+COPY public/ scripts/ src/ src-wasm/ eslint.config.js index.html package.json tsconfig.app.json tsconfig.json tsconfig.node.json vite.config.ts ./
+
+RUN npm install
+
+RUN npm run build
+
+FROM nginx:alpine AS production
+
+COPY --from=build /app/dist /usr/share/nginx/html
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -2,8 +2,6 @@
 
 生成类似小米照片风格的莱卡水印照片。支持佳能、尼康、苹果、华为、小米、DJI 等设备的水印生成，可自动识别，也可自定义处理。
 
-[English](./README_en.md) 中文
-
 ## 在线演示
 
 在线试用地址：
@@ -13,6 +11,27 @@
 
 ![应用截图](./public/screenshot.png)
 
+## 技术实现
+
+### EXIF 解析
+
+使用了 Rust 库 `kamadak-exif` 从图片中提取得到 EXIF 信息并借助 WASM 技术嵌入前端 JavaScript 使用。
+
+### 水印生成
+
+通过 HTML 和 CSS 生成水印样式，能够做到动态调整实时预览。
+
+### 图片生成
+
+导出的图片是通过 `dom-to-image` JavaScript 库来将 DOM 转 JPEG/PNG 等格式图片，请注意这种实现生成的是和原图完全不一样的图片，可以看作屏幕截图的方式。
+
+目前针对 JPEG 格式图片新增了复制原图 EXIF 信息嵌进导出的图片中，目前的实现方式比较简单粗暴，直接从原图二进制数据提取 EXIF 部分的数据，再同样以二进制格式进行拼接，不能确保稳定。
+
+### 改进
+
+- [ ] 改用 Rust `little_exif` 库来实现对图片 EXIF 信息的读取和编辑。
+- [ ] 改用 Canvas 来实现水印，支持高度自定义。
+
 ## 部署方法
 
 ### 使用 Vercel 部署
@@ -77,6 +96,20 @@
    npm run pages
    ```
 
+### 使用 Docker 部署
+
+1. 拉取镜像
+   ```bash
+   docker pull zhiweio/picseal:latest
+   ```
+
+2. 启动容器
+   ```bash
+   docker run -d -p 8080:80 picseal
+   ```
+
+3. 访问 http://localhost:8080
+
 ## 作者
 
 - [@Wang Zhiwei](https://github.com/zhiweio)

nginx.conf

@@ -0,0 +1,24 @@
+server {
+    listen 80;
+    server_name _;;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    location ~* \.(?:ico|css|js|woff|woff2|ttf|otf|eot|svg|jpg|jpeg|png|gif|webp|avif|mp4|webm|ogv|ogg|mp3|m4a|wav|flac)$ {
+        expires 6M;
+        access_log off;
+        add_header Cache-Control "public, max-age=15768000, immutable";
+    }
+
+    error_page 404 /index.html;
+
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "DENY" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -38,6 +38,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "gh-pages": "^6.2.0",
     "rollup-plugin-visualizer": "^5.12.0",