├── snapshot └── img.png ├── stop.sh ├── run.sh ├── Dockerfile ├── deploy.sh ├── .gitignore ├── .github └── workflows │ └── static.yml ├── README.md ├── favicon.svg ├── index.html ├── css └── styles.css ├── LICENSE └── js └── script.js /snapshot/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuijianzhuang/photo-watermark/HEAD/snapshot/img.png -------------------------------------------------------------------------------- /stop.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | docker stop photo-watermark 3 | docker rm photo-watermark 4 | echo "服务已停止" -------------------------------------------------------------------------------- /run.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | docker run -d -p 8172:8172 --name photo-watermark photo-watermark 3 | echo "服务已启动，访问 http://localhost:8172" -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM m.daocloud.io/docker.io/python:3.9-alpine 2 | 3 | WORKDIR /app 4 | COPY . . 5 | 6 | EXPOSE 8172 7 | CMD ["python", "-m", "http.server", "8172"] -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # 停止并删除现有容器 4 | docker stop photo-watermark 2>/dev/null 5 | docker rm photo-watermark 2>/dev/null 6 | 7 | # 构建镜像 8 | ./build.sh 9 | 10 | # 运行容器 11 | ./run.sh -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | /.idea/ 63 | /.vscode/ 64 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["master"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 离线照片水印打码工具![](https://img.shields.io/github/stars/cuijianzhuang/photo-watermark.svg) 2 | 3 | 4 | 一个纯前端实现的离线水印工具，可以安全地为图片添加水印，无需上传图片到服务器，特别适合处理敏感证件（身份证、驾照、护照等）。 5 | 6 | ![img.png](snapshot/img.png) 7 | ## 特性 8 | 9 | - 🔒 完全离线运行，保护隐私安全 10 | - 💪 纯浏览器端处理，无需后端服务 11 | - 🎨 支持多种水印布局方式 12 | - 平铺模式 13 | - 单个水印 14 | - 自定义数量 15 | - 📝 丰富的水印自定义选项 16 | - 文字内容 17 | - 字体大小 18 | - 颜色透明度 19 | - 旋转角度 20 | - 间距调整 21 | - 📷 支持多种图片格式 22 | - JPG/JPEG 23 | - PNG 24 | - GIF 25 | - WebP 26 | - BMP 27 | - ICO 28 | - 🌓 支持深色/浅色主题切换 29 | - 📱 响应式设计，支持移动端 30 | - ⚡ 批量处理功能 31 | - 🖱️ 拖拽上传支持 32 | - 📋 支持复制粘贴上传 33 | 34 | ## 使用方法 35 | 36 | 1. 选择图片上传 37 | - 点击上传 38 | - 拖拽上传 39 | - 粘贴上传 40 | 2. 设置水印文字和样式 41 | - 输入水印文字 42 | - 调整字体大小、颜色、透明度 43 | - 设置旋转角度（-90° 至 90°） 44 | - 选择水印布局方式 45 | 3. 下载处理后的图片 46 | - 单击图片下载单张 47 | - 点击"下载全部"批量下载 48 | 49 | ## 水印布局模式 50 | 51 | ### 平铺模式 52 | - 水印均匀分布在整个图片上 53 | - 可调整间距和角度 54 | 55 | ### 单个水印 56 | - 支持五个固定位置： 57 | - 居中 58 | - 左上角 59 | - 右上角 60 | - 左下角 61 | - 右下角 62 | 63 | ### 自定义数量 64 | - 可设置具体水印数量 65 | - 自动计算最佳分布位置 66 | 67 | ## 技术特性 68 | 69 | - 使用 HTML5 Canvas 进行图片处理 70 | - 支持文本自动换行 71 | - 智能标点符号处理 72 | - 特殊文本（日期、版本号等）保持完整性 73 | - 支持批量处理和批量下载 74 | - 使用 JSZip 处理批量下载 75 | - 支持主题切换和本地存储 76 | 77 | ## 隐私说明 78 | 79 | - 所有操作均在浏览器本地完成 80 | - 不会上传图片到任何服务器 81 | - 无需网络连接即可使用 82 | - 不会保存任何用户数据 83 | 84 | ## 浏览器支持 85 | 86 | - Chrome (推荐) 87 | - Firefox 88 | - Safari 89 | - Edge 90 | - Opera 91 | 92 | ## 开发者 93 | 94 | - 作者：cuijianzhuang 95 | - GitHub：[https://github.com/cuijianzhuang](https://github.com/cuijianzhuang) 96 | 97 | ## 许可证 98 | 99 | MIT License 100 | 101 | ## 贡献 102 | 103 | 欢迎提交 Issue 和 Pull Request！ 104 | 105 | ## 致谢 106 | 本项目 fork 自 [jzsn2018](https://github.com/jzsn2018/offline-photo-watermark), 并在此基础上进行 107 | 二次修改。感谢原作者[@joyqi](https://github.com/joyqi) 108 | -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 离线照片水印打码工具 14 | 15 | 16 | 17 | 21 |
22 |

离线照片水印打码工具

23 |
安全地为你的图片加水印，无任何网络请求，利用浏览器api实现水印，特别适合各种敏感证（身份证，驾照，护照等）。Github地址，求 star
25 | 26 |
27 | 28 |
29 |
30 | 31 |
32 | 📁 33 |

点击或拖拽图片到此处上传

34 |

支持 jpg、jpeg、png、gif、webp、bmp、ico 格式

35 |
36 |
37 | 43 |
44 |
45 |
46 | 47 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 | 66 |
67 | 68 | 72 | 73 | 83 |
84 |
85 | 86 |
87 | 88 |
89 |
90 | 104 | ▼ 105 |
106 | 107 |
108 | 109 | 110 |
111 | 112 |
113 |
114 |
115 | 116 |

117 | 118 | 119 |
121 | 122 | 123 |
125 | 126 | 127 |
129 | 130 | 131 | 133 | 134 | 135 | 138 | 45° 139 |

140 | 141 | 142 |
143 | 147 | 151 |
152 |

153 | 157 |
158 | 161 | 162 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | 2 | #container { 3 | max-width: 1200px; 4 | margin: 30px auto; 5 | padding: 20px; 6 | background: #fff; 7 | border-radius: 8px; 8 | box-shadow: 0 2px 12px rgba(0,0,0,0.1); 9 | transition: all 0.3s ease; 10 | } 11 | 12 | #graph { 13 | display: grid; 14 | grid-gap: 20px; 15 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 16 | margin-top: 20px; 17 | } 18 | 19 | h1 { 20 | margin: 0 0 20px 0; 21 | color: #2c3e50; 22 | font-size: 28px; 23 | } 24 | 25 | article { 26 | font-size: 15px; 27 | color: #666; 28 | line-height: 1.6; 29 | margin-bottom: 30px; 30 | } 31 | 32 | article a { 33 | color: #3498db; 34 | text-decoration: none; 35 | } 36 | 37 | article a:hover { 38 | text-decoration: underline; 39 | } 40 | 41 | .align-center-box { 42 | display: flex; 43 | align-items: center; 44 | margin-bottom: 20px; 45 | padding: 15px; 46 | background: #f8f9fa; 47 | border-radius: 6px; 48 | } 49 | 50 | label { 51 | color: #2c3e50; 52 | font-size: 16px; 53 | margin-right: 15px; 54 | font-weight: 500; 55 | } 56 | 57 | input[type="file"] { 58 | padding: 8px; 59 | background: #fff; 60 | border-radius: 4px; 61 | border: 1px solid #ddd; 62 | } 63 | 64 | input#text { 65 | padding: 8px 12px; 66 | border: 1px solid #ddd; 67 | border-radius: 4px; 68 | font-size: 15px; 69 | } 70 | 71 | input[type=range] { 72 | width: 200px; 73 | height: 6px; 74 | border-radius: 3px; 75 | } 76 | 77 | canvas { 78 | width: 100%; 79 | border: 2px dashed #ddd; 80 | border-radius: 8px; 81 | transition: all 0.3s ease; 82 | } 83 | 84 | canvas:hover { 85 | border-color: #3498db; 86 | box-shadow: 0 2px 8px rgba(0,0,0,0.1); 87 | } 88 | 89 | button { 90 | background: #3498db; 91 | color: white; 92 | border: none; 93 | padding: 10px 20px; 94 | border-radius: 4px; 95 | font-size: 15px; 96 | cursor: pointer; 97 | transition: background 0.3s ease; 98 | margin-left: 10px; 99 | } 100 | 101 | button:hover { 102 | background: #2980b9; 103 | } 104 | 105 | .image-container { 106 | position: relative; 107 | background: #f8f9fa; 108 | padding: 10px; 109 | border-radius: 8px; 110 | transition: all 0.3s ease; 111 | draggable: true; 112 | cursor: move; 113 | } 114 | 115 | .image-container:hover { 116 | transform: translateY(-2px); 117 | box-shadow: 0 5px 15px rgba(0,0,0,0.1); 118 | } 119 | 120 | .image-container canvas { 121 | width: 100%; 122 | height: auto; 123 | display: block; 124 | margin: 0; 125 | border: 1px solid #eee; 126 | } 127 | 128 | .image-info { 129 | padding: 10px 0 0; 130 | display: flex; 131 | flex-direction: column; 132 | gap: 8px; 133 | } 134 | 135 | .image-info span { 136 | white-space: nowrap; 137 | overflow: hidden; 138 | text-overflow: ellipsis; 139 | } 140 | 141 | .download-btn { 142 | background: #3498db; 143 | color: white; 144 | border: none; 145 | padding: 5px 10px; 146 | border-radius: 4px; 147 | font-size: 12px; 148 | cursor: pointer; 149 | transition: background 0.3s ease; 150 | } 151 | 152 | .download-btn:hover { 153 | background: #2980b9; 154 | } 155 | 156 | .image-container canvas { 157 | cursor: zoom-in; 158 | transition: transform 0.2s; 159 | } 160 | 161 | .image-container canvas:hover { 162 | transform: scale(1.02); 163 | } 164 | 165 | #previewModal { 166 | position: fixed; 167 | top: 0; 168 | left: 0; 169 | width: 100%; 170 | height: 100%; 171 | background: rgba(0, 0, 0, 0.9); 172 | z-index: 1000; 173 | display: none; 174 | justify-content: center; 175 | align-items: center; 176 | opacity: 0; 177 | transition: opacity 0.3s ease; 178 | will-change: opacity, transform; 179 | -webkit-backdrop-filter: blur(5px); 180 | backdrop-filter: blur(5px); 181 | } 182 | 183 | #previewModal.active { 184 | opacity: 1; 185 | } 186 | 187 | #previewImage { 188 | max-width: 95%; 189 | max-height: 95%; 190 | object-fit: contain; 191 | transform: scale(0.95); 192 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 193 | will-change: transform, filter; 194 | cursor: zoom-out; 195 | } 196 | 197 | #previewModal.active #previewImage { 198 | transform: scale(1); 199 | } 200 | 201 | /* 添加模糊效果过渡 */ 202 | #previewImage.blur { 203 | filter: blur(10px); 204 | transform: scale(0.98); 205 | } 206 | 207 | /* 优化加载指示器 */ 208 | #previewModal::before { 209 | content: ''; 210 | position: absolute; 211 | top: 50%; 212 | left: 50%; 213 | width: 40px; 214 | height: 40px; 215 | margin: -20px 0 0 -20px; 216 | border: 3px solid rgba(255, 255, 255, 0.2); 217 | border-top-color: #fff; 218 | border-radius: 50%; 219 | animation: spin 1s linear infinite; 220 | opacity: 0; 221 | transition: opacity 0.3s; 222 | } 223 | 224 | #previewModal.loading::before { 225 | opacity: 1; 226 | } 227 | 228 | /* 添加进度条样式 */ 229 | .preview-progress { 230 | position: absolute; 231 | bottom: 0; 232 | left: 0; 233 | width: 100%; 234 | height: 2px; 235 | background: rgba(255, 255, 255, 0.1); 236 | transform: scaleX(0); 237 | transform-origin: left; 238 | transition: transform 0.3s ease; 239 | } 240 | 241 | .preview-progress-inner { 242 | width: 100%; 243 | height: 100%; 244 | background: var(--button-primary); 245 | transform-origin: left; 246 | } 247 | 248 | /* 深色模式适配 */ 249 | [data-theme="dark"] #previewModal::before { 250 | border-color: rgba(0, 0, 0, 0.2); 251 | border-top-color: var(--text-color); 252 | } 253 | 254 | /* 移动端优化 */ 255 | @media (max-width: 768px) { 256 | #previewImage { 257 | max-width: 100%; 258 | max-height: 100%; 259 | } 260 | 261 | #previewModal { 262 | padding: 0; 263 | } 264 | } 265 | 266 | /* 优化动画性能 */ 267 | @media (prefers-reduced-motion: reduce) { 268 | #previewImage, 269 | #previewModal { 270 | transition: none; 271 | } 272 | } 273 | 274 | .delete-btn { 275 | background: #e74c3c; 276 | } 277 | 278 | .delete-btn:hover { 279 | background: #c0392b; 280 | } 281 | 282 | /* 添加拖拽相关的样式 */ 283 | .drag-area { 284 | border: 2px dashed #ddd; 285 | border-radius: 8px; 286 | background: #f8f9fa; 287 | transition: all 0.3s ease; 288 | position: relative; 289 | } 290 | 291 | .drag-area.dragover { 292 | border-color: #3498db; 293 | background: #ebf5fb; 294 | } 295 | 296 | .drag-area::after { 297 | content: '拖拽图片到此处上传'; 298 | position: absolute; 299 | top: 50%; 300 | left: 50%; 301 | transform: translate(-50%, -50%); 302 | font-size: 16px; 303 | color: #666; 304 | pointer-events: none; 305 | opacity: 0; 306 | transition: opacity 0.3s ease; 307 | } 308 | 309 | .drag-area.empty::after { 310 | opacity: 1; 311 | } 312 | 313 | #graph:empty { 314 | min-height: 200px; 315 | } 316 | 317 | .upload-container { 318 | flex: 1; 319 | } 320 | 321 | .upload-box { 322 | position: relative; 323 | min-height: 120px; 324 | border: 2px dashed #ddd; 325 | border-radius: 8px; 326 | background: #f8f9fa; 327 | transition: all 0.3s ease; 328 | display: flex; 329 | align-items: center; 330 | justify-content: center; 331 | cursor: pointer; 332 | } 333 | 334 | .upload-box:hover { 335 | border-color: #3498db; 336 | background: #ebf5fb; 337 | } 338 | 339 | .upload-box input[type="file"] { 340 | position: absolute; 341 | width: 100%; 342 | height: 100%; 343 | top: 0; 344 | left: 0; 345 | opacity: 0; 346 | cursor: pointer; 347 | } 348 | 349 | .upload-hint { 350 | text-align: center; 351 | pointer-events: none; 352 | } 353 | 354 | .upload-icon { 355 | font-size: 32px; 356 | margin-bottom: 10px; 357 | display: block; 358 | } 359 | 360 | .upload-tip { 361 | font-size: 12px; 362 | color: #999; 363 | margin-top: 5px; 364 | } 365 | 366 | .upload-progress { 367 | margin-top: 10px; 368 | display: none; 369 | opacity: 1; 370 | transition: opacity 0.3s ease; 371 | } 372 | 373 | .progress-bar { 374 | height: 4px; 375 | background: var(--progress-bg); 376 | border-radius: 2px; 377 | overflow: hidden; 378 | } 379 | 380 | .progress-inner { 381 | height: 100%; 382 | background: var(--button-primary); 383 | width: 0; 384 | transition: all 0.3s ease; 385 | } 386 | 387 | .progress-text { 388 | font-size: 12px; 389 | color: var(--secondary-text); 390 | text-align: center; 391 | margin-top: 5px; 392 | } 393 | 394 | .dragover { 395 | border-color: #3498db; 396 | background: #ebf5fb; 397 | transform: scale(1.02); 398 | } 399 | 400 | .button-group { 401 | display: flex; 402 | gap: 10px; 403 | margin: 10px 0; 404 | } 405 | 406 | .delete-all-btn { 407 | background: #e74c3c; 408 | color: white; 409 | border: none; 410 | padding: 8px 16px; 411 | border-radius: 4px; 412 | cursor: pointer; 413 | transition: background 0.3s; 414 | } 415 | 416 | .delete-all-btn:hover { 417 | background: #c0392b; 418 | } 419 | 420 | /* 添加深色主题样式 */ 421 | :root { 422 | --bg-color: #ffffff; 423 | --text-color: #2c3e50; 424 | --container-bg: #fff; 425 | --border-color: #ddd; 426 | --box-bg: #f8f9fa; 427 | --shadow-color: rgba(0,0,0,0.1); 428 | --link-color: #3498db; 429 | --secondary-text: #666; 430 | --upload-border: #ddd; 431 | --upload-hover-bg: #ebf5fb; 432 | --progress-bg: #eee; 433 | --button-primary: #3498db; 434 | --button-hover: #2980b9; 435 | --button-delete: #e74c3c; 436 | --button-delete-hover: #c0392b; 437 | --input-bg: #ffffff; 438 | --input-border: #ddd; 439 | --input-color: #2c3e50; 440 | --range-bg: #ddd; 441 | --range-active: #3498db; 442 | --drag-border: #ddd; 443 | --drag-hover-bg: #ebf5fb; 444 | --canvas-border: #ddd; 445 | } 446 | 447 | [data-theme="dark"] { 448 | --bg-color: #1a1a1a; 449 | --text-color: #e0e0e0; 450 | --container-bg: #2d2d2d; 451 | --border-color: #404040; 452 | --box-bg: #333333; 453 | --shadow-color: rgba(0,0,0,0.3); 454 | --link-color: #5dade2; 455 | --secondary-text: #999; 456 | --upload-border: #404040; 457 | --upload-hover-bg: #3d3d3d; 458 | --progress-bg: #404040; 459 | --button-primary: #2980b9; 460 | --button-hover: #3498db; 461 | --button-delete: #c0392b; 462 | --button-delete-hover: #e74c3c; 463 | --input-bg: #333333; 464 | --input-border: #404040; 465 | --input-color: #e0e0e0; 466 | --range-bg: #404040; 467 | --range-active: #2980b9; 468 | --drag-border: #404040; 469 | --drag-hover-bg: #3d3d3d; 470 | --canvas-border: #404040; 471 | } 472 | 473 | body { 474 | background-color: var(--bg-color); 475 | color: var(--text-color); 476 | transition: background-color 0.3s ease; 477 | } 478 | 479 | #container { 480 | background: var(--container-bg); 481 | box-shadow: 0 2px 12px var(--shadow-color); 482 | } 483 | 484 | .align-center-box { 485 | background: var(--box-bg); 486 | } 487 | 488 | input[type="file"], 489 | input[type="text"] { 490 | background: var(--container-bg); 491 | border-color: var(--border-color); 492 | color: var(--text-color); 493 | } 494 | 495 | .image-container { 496 | background: var(--box-bg); 497 | } 498 | 499 | /* 主题切换按钮样式 */ 500 | .theme-switch { 501 | position: fixed; 502 | right: 20px; 503 | top: 20px; 504 | background: var(--container-bg); 505 | border: 1px solid var(--border-color); 506 | padding: 8px 16px; 507 | border-radius: 20px; 508 | cursor: pointer; 509 | display: flex; 510 | align-items: center; 511 | gap: 8px; 512 | z-index: 1000; 513 | transition: all 0.3s ease; 514 | } 515 | 516 | .theme-switch:hover { 517 | transform: translateY(-2px); 518 | box-shadow: 0 2px 8px var(--shadow-color); 519 | } 520 | 521 | .theme-icon { 522 | font-size: 18px; 523 | } 524 | 525 | article { 526 | color: var(--secondary-text); 527 | } 528 | 529 | article a { 530 | color: var(--link-color); 531 | } 532 | 533 | .upload-box { 534 | border-color: var(--upload-border); 535 | background: var(--box-bg); 536 | } 537 | 538 | .upload-box:hover { 539 | border-color: var(--link-color); 540 | background: var(--upload-hover-bg); 541 | } 542 | 543 | .upload-tip { 544 | color: var(--secondary-text); 545 | } 546 | 547 | .progress-bar { 548 | background: var(--progress-bg); 549 | } 550 | 551 | .progress-inner { 552 | background: var(--button-primary); 553 | } 554 | 555 | .progress-text { 556 | color: var(--secondary-text); 557 | } 558 | 559 | button { 560 | background: var(--button-primary); 561 | color: white; 562 | } 563 | 564 | button:hover { 565 | background: var(--button-hover); 566 | } 567 | 568 | .delete-btn { 569 | background: var(--button-delete); 570 | } 571 | 572 | .delete-btn:hover { 573 | background: var(--button-delete-hover); 574 | } 575 | 576 | .delete-all-btn { 577 | background: var(--button-delete); 578 | } 579 | 580 | .delete-all-btn:hover { 581 | background: var(--button-delete-hover); 582 | } 583 | 584 | .image-info { 585 | color: var(--secondary-text); 586 | } 587 | 588 | .drag-area::after { 589 | color: var(--secondary-text); 590 | } 591 | 592 | .dragover { 593 | border-color: var(--link-color); 594 | background: var(--upload-hover-bg); 595 | } 596 | 597 | canvas { 598 | border-color: var(--border-color); 599 | } 600 | 601 | canvas:hover { 602 | border-color: var(--link-color); 603 | } 604 | 605 | footer { 606 | color: var(--secondary-text); 607 | border-top-color: var(--border-color); 608 | } 609 | 610 | footer a { 611 | color: var(--link-color); 612 | } 613 | 614 | #previewModal { 615 | background: rgba(0,0,0,0.9); 616 | } 617 | 618 | /* 添加新的样式规则 */ 619 | input[type="color"] { 620 | background: var(--input-bg); 621 | border: 1px solid var(--input-border); 622 | } 623 | 624 | input[type="range"] { 625 | background: var(--range-bg); 626 | } 627 | 628 | input[type="range"]::-webkit-slider-thumb { 629 | background: var(--range-active); 630 | } 631 | 632 | input[type="range"]::-moz-range-thumb { 633 | background: var(--range-active); 634 | } 635 | 636 | .drag-area { 637 | border-color: var(--drag-border); 638 | background: var(--box-bg); 639 | } 640 | 641 | .drag-area.dragover { 642 | border-color: var(--link-color); 643 | background: var(--drag-hover-bg); 644 | } 645 | 646 | canvas { 647 | border: 2px dashed var(--canvas-border); 648 | } 649 | 650 | h1 { 651 | color: var(--text-color); 652 | } 653 | 654 | label { 655 | color: var(--text-color); 656 | } 657 | 658 | .upload-hint p { 659 | color: var(--text-color); 660 | } 661 | 662 | .theme-switch { 663 | color: var(--text-color); 664 | } 665 | 666 | .theme-text { 667 | color: var(--text-color); 668 | } 669 | 670 | /* 修改预览模态框样式 */ 671 | #previewModal { 672 | background: rgba(0, 0, 0, 0.9); 673 | } 674 | 675 | #previewImage { 676 | background: var(--container-bg); 677 | padding: 10px; 678 | border-radius: 8px; 679 | } 680 | 681 | /* 调整滚动条样式 */ 682 | ::-webkit-scrollbar { 683 | width: 10px; 684 | height: 10px; 685 | } 686 | 687 | ::-webkit-scrollbar-track { 688 | background: var(--box-bg); 689 | } 690 | 691 | ::-webkit-scrollbar-thumb { 692 | background: var(--border-color); 693 | border-radius: 5px; 694 | } 695 | 696 | ::-webkit-scrollbar-thumb:hover { 697 | background: var(--secondary-text); 698 | } 699 | 700 | /* 调整选中文本的颜色 */ 701 | ::selection { 702 | background: var(--button-primary); 703 | color: white; 704 | } 705 | 706 | /* 移动端基础样式优化 */ 707 | @media (max-width: 768px) { 708 | #container { 709 | margin: 10px; 710 | padding: 15px; 711 | } 712 | 713 | h1 { 714 | font-size: 22px; 715 | margin-bottom: 15px; 716 | } 717 | 718 | article { 719 | font-size: 14px; 720 | margin-bottom: 20px; 721 | } 722 | 723 | .align-center-box { 724 | flex-direction: column; 725 | align-items: stretch; 726 | padding: 12px; 727 | } 728 | 729 | label { 730 | margin-bottom: 8px; 731 | margin-right: 0; 732 | } 733 | 734 | input[type="text"] { 735 | width: 100%; 736 | margin-bottom: 10px; 737 | } 738 | 739 | .button-group { 740 | flex-direction: column; 741 | } 742 | 743 | .button-group button { 744 | width: 100%; 745 | margin: 5px 0; 746 | } 747 | 748 | /* 调整主题切换按钮位置 */ 749 | .theme-switch { 750 | top: 10px; 751 | right: 10px; 752 | padding: 6px 12px; 753 | font-size: 14px; 754 | } 755 | 756 | /* 优化图片网格布局 */ 757 | #graph { 758 | grid-template-columns: 1fr; 759 | gap: 15px; 760 | } 761 | 762 | /* 调整上传框大小 */ 763 | .upload-box { 764 | min-height: 100px; 765 | } 766 | 767 | .upload-icon { 768 | font-size: 24px; 769 | } 770 | 771 | /* 优化控制条布局 */ 772 | input[type="range"] { 773 | width: 100%; 774 | margin: 10px 0; 775 | } 776 | 777 | /* 调整预览模态框 */ 778 | #previewModal { 779 | padding: 10px; 780 | } 781 | 782 | #previewImage { 783 | max-width: 100%; 784 | max-height: 90vh; 785 | } 786 | } 787 | 788 | /* 添加触摸设备优化 */ 789 | @media (hover: none) { 790 | .image-container canvas { 791 | cursor: default; 792 | } 793 | 794 | .upload-box:hover { 795 | transform: none; 796 | } 797 | 798 | button:active { 799 | transform: scale(0.98); 800 | } 801 | 802 | .theme-switch:active { 803 | transform: scale(0.95); 804 | } 805 | } 806 | 807 | /* 优化触摸操作区域 */ 808 | button, 809 | input[type="file"], 810 | .theme-switch { 811 | min-height: 44px; 812 | } 813 | 814 | /* 防止iOS缩放 */ 815 | @supports (-webkit-touch-callout: none) { 816 | input[type="color"], 817 | input[type="range"] { 818 | font-size: 16px; 819 | } 820 | } 821 | 822 | /* 基础按钮样式优化 */ 823 | .btn { 824 | display: inline-flex; 825 | align-items: center; 826 | justify-content: center; 827 | padding: 8px 16px; 828 | border: none; 829 | border-radius: 6px; 830 | font-size: 14px; 831 | font-weight: 500; 832 | cursor: pointer; 833 | transition: all 0.2s ease; 834 | gap: 6px; 835 | min-height: 36px; 836 | min-width: 80px; 837 | color: white; 838 | } 839 | 840 | /* 主要按钮 */ 841 | .btn-primary { 842 | background: var(--button-primary); 843 | box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2); 844 | } 845 | 846 | .btn-primary:hover { 847 | background: var(--button-hover); 848 | transform: translateY(-1px); 849 | box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); 850 | } 851 | 852 | /* 危险按钮 */ 853 | .btn-danger { 854 | background: var(--button-delete); 855 | box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2); 856 | } 857 | 858 | .btn-danger:hover { 859 | background: var(--button-delete-hover); 860 | transform: translateY(-1px); 861 | box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3); 862 | } 863 | 864 | /* 按钮图标 */ 865 | .btn-icon { 866 | font-size: 18px; 867 | line-height: 1; 868 | } 869 | 870 | /* 按钮组样式 */ 871 | .button-group { 872 | display: flex; 873 | gap: 12px; 874 | margin: 15px 0; 875 | flex-wrap: wrap; 876 | } 877 | 878 | /* 小型按钮 */ 879 | .btn-sm { 880 | padding: 6px 12px; 881 | font-size: 13px; 882 | min-height: 32px; 883 | min-width: 60px; 884 | } 885 | 886 | /* 按钮加载状态 */ 887 | .btn.loading { 888 | position: relative; 889 | pointer-events: none; 890 | opacity: 0.8; 891 | } 892 | 893 | .btn.loading::after { 894 | content: ''; 895 | position: absolute; 896 | width: 16px; 897 | height: 16px; 898 | border: 2px solid transparent; 899 | border-top-color: currentColor; 900 | border-radius: 50%; 901 | animation: button-loading 0.6s linear infinite; 902 | } 903 | 904 | @keyframes button-loading { 905 | to { 906 | transform: rotate(360deg); 907 | } 908 | } 909 | 910 | /* 移动端适配 */ 911 | @media (max-width: 768px) { 912 | .button-group { 913 | gap: 8px; 914 | } 915 | 916 | .btn { 917 | padding: 8px 14px; 918 | font-size: 13px; 919 | } 920 | } 921 | 922 | /* 触摸设备优化 */ 923 | @media (hover: none) { 924 | .btn:active { 925 | transform: scale(0.98); 926 | } 927 | } 928 | 929 | .style-btn { 930 | width: 36px; 931 | height: 36px; 932 | padding: 0; 933 | margin: 0; 934 | background: var(--input-bg); 935 | border: none; 936 | color: var(--text-color); 937 | cursor: pointer; 938 | display: flex; 939 | align-items: center; 940 | justify-content: center; 941 | transition: all 0.2s; 942 | } 943 | 944 | .style-btn:hover { 945 | background: var(--box-bg); 946 | } 947 | 948 | .style-btn.active { 949 | background: var(--button-primary); 950 | color: white; 951 | } 952 | 953 | .font-select-wrapper select:hover { 954 | border-color: var(--button-primary); 955 | } 956 | 957 | .font-select-wrapper select:focus { 958 | border-color: var(--button-primary); 959 | outline: none; 960 | box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); 961 | } 962 | 963 | /* 复制按钮样式 */ 964 | .copy-btn { 965 | background: var(--button-primary); 966 | } 967 | 968 | .copy-btn:hover { 969 | background: var(--button-hover); 970 | } 971 | 972 | /* Toast提示框样式 */ 973 | #toast { 974 | position: fixed; 975 | bottom: 20px; 976 | left: 50%; 977 | transform: translateX(-50%) translateY(100px); 978 | background: rgba(0, 0, 0, 0.8); 979 | color: white; 980 | padding: 12px 24px; 981 | border-radius: 4px; 982 | font-size: 14px; 983 | z-index: 1000; 984 | opacity: 0; 985 | transition: all 0.3s ease; 986 | pointer-events: none; 987 | } 988 | 989 | #toast.show { 990 | transform: translateX(-50%) translateY(0); 991 | opacity: 1; 992 | } 993 | 994 | /* 深色模式适配 */ 995 | [data-theme="dark"] #toast { 996 | background: rgba(255, 255, 255, 0.9); 997 | color: var(--text-color); 998 | } 999 | 1000 | /* 移动端适配 */ 1001 | @media (max-width: 768px) { 1002 | #toast { 1003 | width: 80%; 1004 | text-align: center; 1005 | padding: 10px 16px; 1006 | font-size: 13px; 1007 | } 1008 | } 1009 | 1010 | /* 添加文件名容器样式 */ 1011 | .file-name { 1012 | font-size: 13px; 1013 | color: var(--text-color); 1014 | white-space: nowrap; 1015 | overflow: hidden; 1016 | text-overflow: ellipsis; 1017 | text-align: center; 1018 | } 1019 | 1020 | /* 修改按钮组样式 */ 1021 | .button-group-container { 1022 | display: flex; 1023 | justify-content: space-between; 1024 | gap: 8px; 1025 | width: 100%; 1026 | } 1027 | 1028 | .button-group-container .download-btn { 1029 | flex: 1; 1030 | min-width: 0; 1031 | padding: 6px; 1032 | font-size: 12px; 1033 | } 1034 | 1035 | /* 添加下载进度条样式 */ 1036 | .download-progress { 1037 | position: relative; 1038 | padding: 20px; 1039 | border-radius: 8px; 1040 | background: var(--box-bg); 1041 | margin-top: 15px; 1042 | display: none; 1043 | opacity: 1; 1044 | transition: all 0.3s ease; 1045 | width: 100%; 1046 | box-sizing: border-box; 1047 | } 1048 | 1049 | .progress-container { 1050 | flex: 1; 1051 | margin-right: 90px; /* 减小按钮预留空间 */ 1052 | width: calc(100% - 90px); /* 确保固定宽度 */ 1053 | } 1054 | 1055 | .progress-bar { 1056 | height: 6px; 1057 | background: var(--progress-bg); 1058 | border-radius: 3px; 1059 | overflow: hidden; 1060 | margin-bottom: 8px; 1061 | width: 100%; 1062 | } 1063 | 1064 | .progress-inner { 1065 | height: 100%; 1066 | background: var(--button-primary); 1067 | width: 0; 1068 | transition: width 0.3s ease; 1069 | } 1070 | 1071 | .progress-text { 1072 | font-size: 13px; 1073 | color: var(--text-color); 1074 | margin-bottom: 4px; 1075 | } 1076 | 1077 | .progress-eta { 1078 | font-size: 12px; 1079 | color: var(--secondary-text); 1080 | } 1081 | 1082 | .progress-actions { 1083 | position: absolute; 1084 | right: 20px; 1085 | top: 50%; 1086 | transform: translateY(-50%); 1087 | width: 80px; /* 固定按钮容器宽度 */ 1088 | } 1089 | 1090 | .cancel-btn, 1091 | .retry-btn { 1092 | padding: 6px 12px; 1093 | border-radius: 4px; 1094 | border: none; 1095 | font-size: 12px; 1096 | cursor: pointer; 1097 | transition: all 0.2s; 1098 | width: 100%; /* 按钮填满容器 */ 1099 | display: flex; 1100 | align-items: center; 1101 | justify-content: center; 1102 | gap: 4px; 1103 | } 1104 | 1105 | .cancel-btn { 1106 | background: var(--button-delete); 1107 | color: white; 1108 | } 1109 | 1110 | .retry-btn { 1111 | background: var(--button-primary); 1112 | color: white; 1113 | display: none; 1114 | } 1115 | 1116 | .cancel-btn:hover, 1117 | .retry-btn:hover { 1118 | transform: scale(1.05); 1119 | } 1120 | 1121 | /* 移动端适配 */ 1122 | @media (max-width: 768px) { 1123 | .download-progress { 1124 | padding: 15px; 1125 | } 1126 | 1127 | .progress-container { 1128 | margin-right: 0; 1129 | margin-bottom: 10px; 1130 | } 1131 | 1132 | .progress-actions { 1133 | position: static; 1134 | transform: none; 1135 | display: flex; 1136 | justify-content: stretch; 1137 | gap: 8px; 1138 | margin-top: 12px; 1139 | width: 100%; 1140 | } 1141 | 1142 | .cancel-btn, 1143 | .retry-btn { 1144 | flex: 1; 1145 | width: 100%; 1146 | padding: 8px; 1147 | } 1148 | } 1149 | 1150 | .preview-nav { 1151 | position: absolute; 1152 | top: 50%; 1153 | transform: translateY(-50%); 1154 | background: rgba(0, 0, 0, 0.5); 1155 | color: white; 1156 | border: none; 1157 | padding: 20px 15px; 1158 | cursor: pointer; 1159 | font-size: 20px; 1160 | opacity: 0; 1161 | transition: opacity 0.3s, background 0.3s; 1162 | } 1163 | 1164 | #previewModal:hover .preview-nav { 1165 | opacity: 0.7; 1166 | } 1167 | 1168 | .preview-nav:hover { 1169 | opacity: 1 !important; 1170 | background: rgba(0, 0, 0, 0.8); 1171 | } 1172 | 1173 | .preview-nav.prev { 1174 | left: 20px; 1175 | border-radius: 0 3px 3px 0; 1176 | } 1177 | 1178 | .preview-nav.next { 1179 | right: 20px; 1180 | border-radius: 3px 0 0 3px; 1181 | } 1182 | 1183 | @media (max-width: 768px) { 1184 | .preview-nav { 1185 | padding: 15px 10px; 1186 | font-size: 16px; 1187 | } 1188 | } 1189 | 1190 | .template-buttons { 1191 | margin-top: 10px; 1192 | display: flex; 1193 | flex-wrap: wrap; 1194 | gap: 8px; 1195 | } 1196 | 1197 | .template-btn { 1198 | background: var(--box-bg); 1199 | color: var(--text-color); 1200 | border: 1px solid var(--border-color); 1201 | padding: 6px 12px; 1202 | border-radius: 4px; 1203 | font-size: 13px; 1204 | cursor: pointer; 1205 | transition: all 0.2s ease; 1206 | } 1207 | 1208 | .template-btn:hover { 1209 | background: var(--button-primary); 1210 | color: white; 1211 | border-color: var(--button-primary); 1212 | } 1213 | 1214 | @media (max-width: 768px) { 1215 | .template-buttons { 1216 | margin-top: 8px; 1217 | gap: 6px; 1218 | } 1219 | 1220 | .template-btn { 1221 | padding: 4px 8px; 1222 | font-size: 12px; 1223 | } 1224 | 1225 | template-buttons { 1226 | margin-top: 10px; 1227 | display: flex; 1228 | flex-wrap: wrap; 1229 | gap: 8px; 1230 | } 1231 | 1232 | .template-btn { 1233 | background: var(--box-bg); 1234 | color: var(--text-color); 1235 | border: 1px solid var(--border-color); 1236 | padding: 6px 12px; 1237 | border-radius: 4px; 1238 | font-size: 13px; 1239 | cursor: pointer; 1240 | transition: all 0.2s ease; 1241 | } 1242 | 1243 | .template-btn:hover { 1244 | background: var(--button-primary); 1245 | color: white; 1246 | border-color: var(--button-primary); 1247 | } 1248 | 1249 | @media (max-width: 768px) { 1250 | .template-buttons { 1251 | margin-top: 8px; 1252 | gap: 6px; 1253 | } 1254 | 1255 | .template-btn { 1256 | padding: 4px 8px; 1257 | font-size: 12px; 1258 | } 1259 | } 1260 | 1261 | .download-progress { 1262 | position: relative; 1263 | padding: 20px; 1264 | border-radius: 8px; 1265 | background: var(--box-bg); 1266 | margin-top: 15px; 1267 | display: none; 1268 | opacity: 1; 1269 | transition: all 0.3s ease; 1270 | width: 100%; 1271 | box-sizing: border-box; 1272 | } 1273 | 1274 | .progress-container { 1275 | flex: 1; 1276 | margin-right: 90px; /* 减小按钮预留空间 */ 1277 | width: calc(100% - 90px); /* 确保固定宽度 */ 1278 | } 1279 | 1280 | .progress-bar { 1281 | height: 6px; 1282 | background: var(--progress-bg); 1283 | border-radius: 3px; 1284 | overflow: hidden; 1285 | margin-bottom: 8px; 1286 | width: 100%; 1287 | } 1288 | 1289 | .progress-inner { 1290 | height: 100%; 1291 | background: var(--button-primary); 1292 | width: 0; 1293 | transition: width 0.3s ease; 1294 | } 1295 | 1296 | .progress-text { 1297 | font-size: 13px; 1298 | color: var(--text-color); 1299 | margin-bottom: 4px; 1300 | } 1301 | 1302 | .progress-eta { 1303 | font-size: 12px; 1304 | color: var(--secondary-text); 1305 | } 1306 | 1307 | .progress-actions { 1308 | position: absolute; 1309 | right: 20px; 1310 | top: 50%; 1311 | transform: translateY(-50%); 1312 | width: 80px; /* 固定按钮容器宽度 */ 1313 | } 1314 | 1315 | .cancel-btn, 1316 | .retry-btn { 1317 | padding: 6px 12px; 1318 | border-radius: 4px; 1319 | border: none; 1320 | font-size: 12px; 1321 | cursor: pointer; 1322 | transition: all 0.2s; 1323 | width: 100%; /* 按钮填满容器 */ 1324 | display: flex; 1325 | align-items: center; 1326 | justify-content: center; 1327 | gap: 4px; 1328 | } 1329 | 1330 | .cancel-btn { 1331 | background: var(--button-delete); 1332 | color: white; 1333 | } 1334 | 1335 | .retry-btn { 1336 | background: var(--button-primary); 1337 | color: white; 1338 | display: none; 1339 | } 1340 | 1341 | .cancel-btn:hover, 1342 | .retry-btn:hover { 1343 | transform: scale(1.05); 1344 | } 1345 | 1346 | /* 移动端适配 */ 1347 | @media (max-width: 768px) { 1348 | .download-progress { 1349 | padding: 15px; 1350 | } 1351 | 1352 | .progress-container { 1353 | margin-right: 0; 1354 | margin-bottom: 10px; 1355 | } 1356 | 1357 | .progress-actions { 1358 | position: static; 1359 | transform: none; 1360 | display: flex; 1361 | justify-content: stretch; 1362 | gap: 8px; 1363 | margin-top: 12px; 1364 | width: 100%; 1365 | } 1366 | 1367 | .cancel-btn, 1368 | .retry-btn { 1369 | flex: 1; 1370 | width: 100%; 1371 | padding: 8px; 1372 | } 1373 | } 1374 | 1375 | .preview-nav { 1376 | position: absolute; 1377 | top: 50%; 1378 | transform: translateY(-50%); 1379 | background: rgba(0, 0, 0, 0.5); 1380 | color: white; 1381 | border: none; 1382 | padding: 20px 15px; 1383 | cursor: pointer; 1384 | font-size: 20px; 1385 | opacity: 0; 1386 | transition: opacity 0.3s, background 0.3s; 1387 | } 1388 | 1389 | #previewModal:hover .preview-nav { 1390 | opacity: 0.7; 1391 | } 1392 | 1393 | .preview-nav:hover { 1394 | opacity: 1 !important; 1395 | background: rgba(0, 0, 0, 0.8); 1396 | } 1397 | 1398 | .preview-nav.prev { 1399 | left: 20px; 1400 | border-radius: 0 3px 3px 0; 1401 | } 1402 | 1403 | .preview-nav.next { 1404 | right: 20px; 1405 | border-radius: 3px 0 0 3px; 1406 | } 1407 | 1408 | @media (max-width: 768px) { 1409 | .preview-nav { 1410 | padding: 15px 10px; 1411 | font-size: 16px; 1412 | } 1413 | } 1414 | 1415 | /* 基础样式 */ 1416 | :root { 1417 | --bg-color: #ffffff; 1418 | --text-color: #2c3e50; 1419 | --container-bg: #fff; 1420 | /* ... 其他变量定义 ... */ 1421 | } 1422 | 1423 | /* 深色主题 */ 1424 | [data-theme="dark"] { 1425 | --bg-color: #1a1a1a; 1426 | --text-color: #e0e0e0; 1427 | /* ... 其他深色主题变量 ... */ 1428 | } 1429 | 1430 | /* 容器样式 */ 1431 | #container { 1432 | max-width: 1200px; 1433 | margin: 30px auto; 1434 | padding: 20px; 1435 | background: var(--container-bg); 1436 | border-radius: 8px; 1437 | box-shadow: 0 2px 12px var(--shadow-color); 1438 | transition: all 0.3s ease; 1439 | } 1440 | } 1441 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | var $, canvas, dataURItoBlob, graph, image, configInputSetting, inputItems, 2 | readFile, previewModal, previewImage; 3 | 4 | $ = function (sel) { 5 | return document.querySelector(sel); 6 | }; 7 | 8 | inputItems = ['text', 'color', 'alpha', 'space', 'size', 'rotate', 'watermarkPattern', 'watermarkCount', 'watermarkPosition', 'fontFamily']; 9 | 10 | configInputSetting = {}; // 保存所有水印 11 | allCanvas = []; // 保存所有的canvas 12 | 13 | image = $('#image'); 14 | 15 | graph = $('#graph'); 16 | 17 | dataURItoBlob = function (dataURI) { 18 | var arr, binStr, i, len, _i, _ref; 19 | binStr = atob((dataURI.split(','))[1]); 20 | len = binStr.length; 21 | arr = new Uint8Array(len); 22 | for (i = _i = 0, _ref = len - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { 23 | arr[i] = binStr.charCodeAt(i); 24 | } 25 | return new Blob([arr], { 26 | type: 'image/png' 27 | }); 28 | }; 29 | 30 | const generateFileName = (fileName) => { 31 | var d, pad; 32 | pad = function (n) { 33 | if (n < 10) { 34 | return '0' + n; 35 | } else { 36 | return n; 37 | } 38 | }; 39 | d = new Date; 40 | const timeStr = '' + d.getFullYear() + '-' + (pad(d.getMonth() + 1)) + '-' + (pad(d 41 | .getDate())) + ' ' + ( 42 | pad(d 43 | .getHours())) + (pad(d.getMinutes())) + (pad(d.getSeconds())) 44 | return fileName + '_' + timeStr + '.png'; 45 | }; 46 | const redrawCanvas = (canvas, img) => { 47 | // 重新设置canvas的宽高，会清空画布 48 | var w = canvas.width; 49 | var h = canvas.height; 50 | canvas.width = w; 51 | canvas.height = h; 52 | canvas.getContext('2d').drawImage(img, 0, 0); 53 | }; 54 | 55 | const downloadCanvasAsImage = (canvas, fileName) => { 56 | var blob, imageData, link; 57 | link = document.createElement('a'); 58 | link.download = generateFileName(fileName); 59 | imageData = canvas.toDataURL('image/png'); 60 | blob = dataURItoBlob(imageData); 61 | link.href = URL.createObjectURL(blob); 62 | graph.appendChild(link); 63 | return setTimeout(function () { 64 | link.click(); 65 | return graph.removeChild(link); 66 | }, 10); 67 | } 68 | 69 | readFile = function (file) { 70 | const progressBar = $('.progress-inner'); 71 | const progressText = $('.progress-text'); 72 | const uploadProgress = $('#uploadProgress'); 73 | 74 | uploadProgress.style.display = 'block'; 75 | progressBar.style.width = '0%'; 76 | progressText.textContent = `准备处理 ${file.name}...`; 77 | 78 | var fileReader = new FileReader; 79 | 80 | // 添加进度监听 81 | fileReader.onprogress = (e) => { 82 | if (e.lengthComputable) { 83 | const progress = (e.loaded / e.total) * 100; 84 | const percentage = Math.round(progress); 85 | progressBar.style.width = percentage + '%'; 86 | 87 | // 添加文件大小信息 88 | const loaded = (e.loaded / 1024 / 1024).toFixed(1); 89 | const total = (e.total / 1024 / 1024).toFixed(1); 90 | progressText.textContent = `正在处理 ${file.name}: ${percentage}% (${loaded}MB/${total}MB)`; 91 | 92 | // 添加进度条颜色渐变 93 | progressBar.style.background = `linear-gradient(90deg, 94 | var(--button-primary) ${percentage}%, 95 | var(--progress-bg) ${percentage}%)`; 96 | } 97 | }; 98 | 99 | fileReader.onload = function () { 100 | progressBar.style.width = '100%'; 101 | progressText.textContent = `正在处理 ${file.name}...`; 102 | progressBar.style.background = 'var(--button-primary)'; 103 | 104 | var img = new Image; 105 | img.onload = function () { 106 | var ctx; 107 | const canvas = document.createElement('canvas'); 108 | canvas.width = img.width; 109 | canvas.height = img.height; 110 | ctx = canvas.getContext('2d'); 111 | ctx.drawImage(img, 0, 0); 112 | 113 | // 建图片容器 114 | const container = document.createElement('div'); 115 | container.className = 'image-container'; 116 | 117 | // 添加画布，并增加点击预览功能 118 | canvas.style.cursor = 'zoom-in'; 119 | canvas.addEventListener('click', () => { 120 | showPreview(canvas); 121 | }); 122 | 123 | // 先添加到数组中 124 | allCanvas.push({ 125 | img: img, 126 | canvas: canvas, 127 | fileName: file.name 128 | }); 129 | 130 | // 然后绘制水印 131 | drawText(canvas, img); 132 | 133 | container.appendChild(canvas); 134 | 135 | // 添加图片信息和操作按钮 136 | const infoDiv = document.createElement('div'); 137 | infoDiv.className = 'image-info'; 138 | 139 | // 添加文件名 140 | const nameSpan = document.createElement('div'); 141 | nameSpan.className = 'file-name'; 142 | nameSpan.textContent = file.name; 143 | 144 | const buttonGroup = document.createElement('div'); 145 | buttonGroup.className = 'button-group-container'; 146 | 147 | const copyBtn = document.createElement('button'); 148 | copyBtn.className = 'download-btn copy-btn'; 149 | copyBtn.textContent = '复制'; 150 | copyBtn.onclick = (e) => { 151 | e.stopPropagation(); 152 | copyImageToClipboard(canvas); 153 | }; 154 | 155 | const downloadBtn = document.createElement('button'); 156 | downloadBtn.className = 'download-btn'; 157 | downloadBtn.textContent = '下载'; 158 | downloadBtn.onclick = (e) => { 159 | e.stopPropagation(); 160 | downloadCanvasAsImage(canvas, file.name); 161 | }; 162 | 163 | const deleteBtn = document.createElement('button'); 164 | deleteBtn.className = 'download-btn delete-btn'; 165 | deleteBtn.textContent = '删除'; 166 | deleteBtn.onclick = (e) => { 167 | e.stopPropagation(); 168 | const index = allCanvas.findIndex(item => item.canvas === canvas); 169 | if (index > -1) { 170 | allCanvas.splice(index, 1); 171 | } 172 | container.remove(); 173 | 174 | if (graph.children.length === 0) { 175 | graph.classList.add('empty'); 176 | } 177 | }; 178 | 179 | buttonGroup.appendChild(copyBtn); 180 | buttonGroup.appendChild(downloadBtn); 181 | buttonGroup.appendChild(deleteBtn); 182 | 183 | infoDiv.appendChild(nameSpan); 184 | infoDiv.appendChild(buttonGroup); 185 | container.appendChild(infoDiv); 186 | 187 | graph.appendChild(container); 188 | graph.classList.remove('empty'); 189 | 190 | progressText.textContent = `${file.name} 处理完成`; 191 | progressBar.style.background = 'var(--button-primary)'; 192 | 193 | // 平滑过渡后隐藏进度条 194 | setTimeout(() => { 195 | uploadProgress.style.opacity = '0'; 196 | setTimeout(() => { 197 | uploadProgress.style.display = 'none'; 198 | uploadProgress.style.opacity = '1'; 199 | progressBar.style.width = '0%'; 200 | }, 300); 201 | }, 1000); 202 | }; 203 | 204 | img.onerror = function () { 205 | progressText.textContent = `${file.name} 处理失败`; 206 | progressBar.style.background = 'var(--button-delete)'; 207 | setTimeout(() => { 208 | uploadProgress.style.opacity = '0'; 209 | setTimeout(() => { 210 | uploadProgress.style.display = 'none'; 211 | uploadProgress.style.opacity = '1'; 212 | progressBar.style.width = '0%'; 213 | }, 300); 214 | }, 2000); 215 | }; 216 | 217 | img.src = fileReader.result; 218 | }; 219 | 220 | fileReader.onerror = function () { 221 | progressText.textContent = `${file.name} 读取失败`; 222 | progressBar.style.background = 'var(--button-delete)'; 223 | setTimeout(() => { 224 | uploadProgress.style.opacity = '0'; 225 | setTimeout(() => { 226 | uploadProgress.style.display = 'none'; 227 | uploadProgress.style.opacity = '1'; 228 | progressBar.style.width = '0%'; 229 | }, 300); 230 | }, 2000); 231 | }; 232 | 233 | fileReader.readAsDataURL(file); 234 | }; 235 | 236 | const makeStyle = () => { 237 | var match; 238 | match = configInputSetting.color.value.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i); 239 | return 'rgba(' + (parseInt(match[1], 16)) + ',' + (parseInt(match[2], 16)) + ',' + (parseInt(match[3], 240 | 16)) + ',' + configInputSetting.alpha.value + ')'; 241 | }; 242 | 243 | let fontStyles = { 244 | bold: false, 245 | italic: false 246 | }; 247 | 248 | function toggleFontStyle(style) { 249 | const btn = document.getElementById(style + 'Toggle'); 250 | fontStyles[style] = !fontStyles[style]; 251 | btn.classList.toggle('active'); 252 | 253 | // 更新所有画布 254 | allCanvas.forEach(({canvas, img}) => { 255 | drawText(canvas, img); 256 | }); 257 | } 258 | 259 | const drawText = (canvas, img) => { 260 | // 参数验证 261 | if (!canvas || !img) { 262 | console.warn('drawText: 缺少必要参数 canvas 或 img'); 263 | return; 264 | } 265 | 266 | try { 267 | redrawCanvas(canvas, img); 268 | const textCtx = canvas.getContext('2d'); 269 | if (!textCtx) { 270 | console.error('无法获取 canvas context'); 271 | return; 272 | } 273 | 274 | // 获取并验证配置参数 275 | const pattern = configInputSetting.watermarkPattern?.value || 'tile'; 276 | const position = configInputSetting.watermarkPosition?.value || 'center'; 277 | const count = Math.max(1, parseInt(configInputSetting.watermarkCount?.value) || 1); 278 | 279 | // 字体设置 280 | const fontFamily = configInputSetting.fontFamily?.value || '黑体'; 281 | const fontWeight = fontStyles.bold ? 'bold' : 'normal'; 282 | const fontStyle = fontStyles.italic ? 'italic' : 'normal'; 283 | 284 | // 安全的数值计算 285 | const diagonal = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height) || 1000; 286 | const textSize = Math.max(12, (configInputSetting.size?.value || 1) * Math.max(15, diagonal / 25)); 287 | 288 | // 构建字体样式 289 | const fontString = `${fontStyle} ${fontWeight} ${textSize}px "${fontFamily}"`; 290 | textCtx.font = fontString; 291 | textCtx.fillStyle = makeStyle(); 292 | 293 | const text = configInputSetting.text?.value?.trim() || '水印文字'; 294 | const maxWidth = Math.min(Math.max(100, canvas.width * 0.8), 500); // 确保合理的最大宽度 295 | 296 | // 文本换行处理函数 297 | const wrapText = (text, maxWidth) => { 298 | // 参数验证和默认值 299 | if (!text || typeof text !== 'string') { 300 | console.warn('wrapText: 无效的文本输入'); 301 | return ['水印文字']; 302 | } 303 | maxWidth = Math.max(50, maxWidth || 100); // 确保最小宽度 304 | 305 | try { 306 | // 优化分隔规则 307 | const splitPattern = /([，。！？；：、,.!?;:\s]|[0-9-\/年月日]+|[a-zA-Z]+|[\u4e00-\u9fa5]+|[^\u4e00-\u9fa5a-zA-Z0-9\s])/g; 308 | const segments = text.match(splitPattern) || []; 309 | 310 | const lines = []; 311 | let currentLine = ''; 312 | 313 | // 辅助函数 314 | const isPunctuation = (str) => { 315 | try { 316 | return /^[，。！？；：、,.!?;:\s]$/.test(str); 317 | } catch (e) { 318 | console.warn('isPunctuation 检查失败:', e); 319 | return false; 320 | } 321 | }; 322 | 323 | const measureWidth = (str) => { 324 | try { 325 | return textCtx.measureText(str).width; 326 | } catch (e) { 327 | console.warn('measureWidth 测量失败:', e); 328 | return Infinity; 329 | } 330 | }; 331 | 332 | // 处理分段 333 | for (let i = 0; i < segments.length; i++) { 334 | const segment = segments[i]?.trim() || ''; 335 | if (!segment) continue; 336 | 337 | try { 338 | const nextSegment = segments[i + 1]?.trim() || ''; 339 | const isNextPunctuation = isPunctuation(nextSegment); 340 | 341 | // 标点符号处理 342 | if (isPunctuation(segment)) { 343 | if (!currentLine && lines.length > 0) { 344 | const lastLine = lines[lines.length - 1]; 345 | const testLastLine = lastLine + segment; 346 | if (measureWidth(testLastLine) <= maxWidth) { 347 | lines[lines.length - 1] = testLastLine; 348 | } else { 349 | currentLine = segment; 350 | } 351 | } else { 352 | currentLine += segment; 353 | } 354 | continue; 355 | } 356 | 357 | // 尝试添加新片段 358 | const testLine = currentLine + segment + (isNextPunctuation ? nextSegment : ''); 359 | const testWidth = measureWidth(testLine); 360 | 361 | if (testWidth <= maxWidth) { 362 | currentLine += segment; 363 | if (isNextPunctuation) { 364 | currentLine += nextSegment; 365 | i++; 366 | } 367 | } else { 368 | if (currentLine) { 369 | if (!isPunctuation(currentLine)) { 370 | lines.push(currentLine); 371 | currentLine = segment; 372 | if (isNextPunctuation && measureWidth(segment + nextSegment) <= maxWidth) { 373 | currentLine += nextSegment; 374 | i++; 375 | } 376 | } else { 377 | currentLine += segment; 378 | } 379 | } else { 380 | // 处理长文本 381 | if (segment.length <= 4) { 382 | lines.push(segment); 383 | currentLine = ''; 384 | } else { 385 | let tempLine = ''; 386 | for (const char of segment) { 387 | const testTemp = tempLine + char; 388 | if (measureWidth(testTemp) <= maxWidth) { 389 | tempLine = testTemp; 390 | } else { 391 | if (tempLine) { 392 | if (isPunctuation(char)) { 393 | if (measureWidth(tempLine + char) <= maxWidth * 1.1) { 394 | tempLine += char; 395 | } else { 396 | lines.push(tempLine); 397 | tempLine = char; 398 | } 399 | } else { 400 | lines.push(tempLine); 401 | tempLine = char; 402 | } 403 | } else { 404 | tempLine = char; 405 | } 406 | } 407 | } 408 | if (tempLine) { 409 | currentLine = tempLine; 410 | } 411 | } 412 | } 413 | } 414 | } catch (e) { 415 | console.warn('处理文本片段时出错:', e); 416 | if (currentLine) lines.push(currentLine); 417 | currentLine = segment; 418 | } 419 | } 420 | 421 | // 处理最后一行 422 | if (currentLine) { 423 | try { 424 | if (!isPunctuation(currentLine) || lines.length === 0) { 425 | lines.push(currentLine); 426 | } else if (lines.length > 0) { 427 | const lastLine = lines[lines.length - 1]; 428 | const testLastLine = lastLine + currentLine; 429 | if (measureWidth(testLastLine) <= maxWidth * 1.1) { 430 | lines[lines.length - 1] = testLastLine; 431 | } else { 432 | lines.push(currentLine); 433 | } 434 | } 435 | } catch (e) { 436 | console.warn('处理最后一行时出错:', e); 437 | lines.push(currentLine); 438 | } 439 | } 440 | 441 | return lines.length > 0 ? lines : ['水印文字']; 442 | } catch (e) { 443 | console.error('wrapText 处理失败:', e); 444 | return ['水印文字']; 445 | } 446 | }; 447 | 448 | const lines = wrapText(text, maxWidth); 449 | const lineHeight = textSize * 1.2; // 行高为字体大小的1.2倍 450 | const totalHeight = lineHeight * lines.length; 451 | 452 | // 修改绘制单个水印的函数 453 | const drawSingleWatermark = (x, y, angle) => { 454 | textCtx.save(); 455 | textCtx.translate(x, y); 456 | textCtx.rotate(angle * Math.PI / 180); 457 | 458 | // 绘制多行文本 459 | lines.forEach((line, index) => { 460 | const lineY = (index - (lines.length - 1) / 2) * lineHeight; 461 | const lineWidth = textCtx.measureText(line).width; 462 | textCtx.fillText(line, -lineWidth / 2, lineY + textSize / 2); 463 | }); 464 | 465 | textCtx.restore(); 466 | }; 467 | 468 | if (pattern === 'tile') { 469 | // 平铺模式 470 | textCtx.save(); 471 | textCtx.translate(canvas.width / 2, canvas.height / 2); 472 | const angle = parseFloat(configInputSetting.rotate.value); 473 | textCtx.rotate(angle * Math.PI / 180); 474 | 475 | const maxLineWidth = Math.max(...lines.map(line => textCtx.measureText(line).width)); 476 | const xStep = maxLineWidth + textCtx.measureText('啊').width; 477 | const yStep = configInputSetting.space.value * (totalHeight + textSize); 478 | const rectWidth = diagonal; 479 | const rectHeight = diagonal; 480 | const startX = -rectWidth / 2; 481 | const startY = -rectHeight / 2; 482 | 483 | const cols = Math.ceil(rectWidth / xStep); 484 | const rows = Math.ceil(rectHeight / yStep); 485 | 486 | for (let i = 0; i <= cols; i++) { 487 | for (let j = 0; j <= rows; j++) { 488 | const x = startX + i * xStep; 489 | const y = startY + j * yStep; 490 | lines.forEach((line, index) => { 491 | const lineY = y + (index - (lines.length - 1) / 2) * lineHeight; 492 | const lineWidth = textCtx.measureText(line).width; 493 | textCtx.fillText(line, x - lineWidth / 2, lineY + textSize / 2); 494 | }); 495 | } 496 | } 497 | textCtx.restore(); 498 | } else { 499 | // 单个水印或自定义数量模式 500 | const positions = []; 501 | const padding = Math.min(canvas.width, canvas.height) * 0.1; 502 | 503 | if (pattern === 'single' || count === 1) { 504 | // 单个水印位置计算 505 | const maxLineWidth = Math.max(...lines.map(line => textCtx.measureText(line).width)); 506 | 507 | switch (position) { 508 | case 'center': 509 | positions.push([canvas.width / 2, canvas.height / 2]); 510 | break; 511 | case 'top-left': 512 | positions.push([maxLineWidth / 2 + padding, totalHeight / 2 + padding]); 513 | break; 514 | case 'top-right': 515 | positions.push([canvas.width - maxLineWidth / 2 - padding, totalHeight / 2 + padding]); 516 | break; 517 | case 'bottom-left': 518 | positions.push([maxLineWidth / 2 + padding, canvas.height - totalHeight / 2 - padding]); 519 | break; 520 | case 'bottom-right': 521 | positions.push([canvas.width - maxLineWidth / 2 - padding, canvas.height - totalHeight / 2 - padding]); 522 | break; 523 | default: 524 | positions.push([canvas.width / 2, canvas.height / 2]); // 默认居中 525 | } 526 | } else { 527 | // 自定义数量水印的均匀分布 528 | // const area = canvas.width * canvas.height; 529 | // const spacing = Math.sqrt(area / count); // 计算水印间距 530 | 531 | const cols = Math.ceil(Math.sqrt(count * canvas.width / canvas.height)); 532 | const rows = Math.ceil(count / cols); 533 | 534 | const xStep = (canvas.width - 2 * padding) / (cols - 1 || 1); 535 | const yStep = (canvas.height - 2 * padding) / (rows - 1 || 1); 536 | 537 | let currentCount = 0; 538 | for (let i = 0; i < cols && currentCount < count; i++) { 539 | for (let j = 0; j < rows && currentCount < count; j++) { 540 | positions.push([ 541 | padding + i * xStep, 542 | padding + j * yStep 543 | ]); 544 | currentCount++; 545 | } 546 | } 547 | } 548 | 549 | const angle = parseFloat(configInputSetting.rotate.value); 550 | positions.forEach(([x, y]) => { 551 | drawSingleWatermark(x, y, angle); 552 | }); 553 | } 554 | } catch (error) { 555 | console.error('绘制水印时发生错误:', error); 556 | // 尝试恢复原始图片 557 | try { 558 | redrawCanvas(canvas, img); 559 | } catch (e) { 560 | console.error('恢复原始图片失败:', e); 561 | } 562 | } 563 | }; 564 | 565 | // 添加支持的图片类型设置 566 | const SUPPORTED_IMAGE_TYPES = { 567 | 'image/jpeg': ['jpg', 'jpeg'], 568 | 'image/png': ['png'], 569 | 'image/gif': ['gif'], 570 | 'image/webp': ['webp'], 571 | 'image/bmp': ['bmp'], 572 | 'image/x-icon': ['ico'], 573 | 'image/vnd.microsoft.icon': ['ico'] 574 | }; 575 | 576 | // 检查文件类型是否支持 577 | function isImageTypeSupported(file) { 578 | return Object.keys(SUPPORTED_IMAGE_TYPES).includes(file.type); 579 | } 580 | 581 | // 获取文件扩展名 582 | // function getFileExtension(file) { 583 | // const ext = file.name.split('.').pop().toLowerCase(); 584 | // for (const [mimeType, extensions] of Object.entries(SUPPORTED_IMAGE_TYPES)) { 585 | // if (extensions.includes(ext)) { 586 | // return ext; 587 | // } 588 | // } 589 | // return null; 590 | // } 591 | 592 | image.addEventListener('change', function () { 593 | const batchFileHandler = function (file) { 594 | if (!isImageTypeSupported(file)) { 595 | const supportedFormats = Object.values(SUPPORTED_IMAGE_TYPES).flat().join('、'); 596 | return alert(`不支持的图片格式。支持的格式：${supportedFormats}`); 597 | } 598 | readFile(file); 599 | }; 600 | [...this.files].forEach(batchFileHandler); 601 | }); 602 | 603 | inputItems.forEach(function (item) { 604 | var el; 605 | el = $('#' + item); 606 | configInputSetting[item] = el; 607 | return el.addEventListener('input', () => { 608 | allCanvas.forEach(({ 609 | canvas, 610 | img 611 | }) => { 612 | drawText(canvas, img); 613 | }); 614 | }); 615 | }); 616 | 617 | const container = $('#container'); 618 | 619 | // 添加空状态类 620 | graph.classList.add('drag-area', 'empty'); 621 | 622 | container.addEventListener('dragover', (e) => { 623 | e.preventDefault(); 624 | e.stopPropagation(); 625 | graph.classList.add('dragover'); 626 | }); 627 | 628 | container.addEventListener('dragleave', (e) => { 629 | e.preventDefault(); 630 | e.stopPropagation(); 631 | graph.classList.remove('dragover'); 632 | }); 633 | 634 | container.addEventListener('drop', (e) => { 635 | e.preventDefault(); 636 | e.stopPropagation(); 637 | graph.classList.remove('dragover'); 638 | 639 | const files = [...e.dataTransfer.files]; 640 | files.forEach(file => { 641 | if (!isImageTypeSupported(file)) { 642 | const supportedFormats = Object.values(SUPPORTED_IMAGE_TYPES).flat().join('、'); 643 | return alert(`不支持的图片格式。支持的格式：${supportedFormats}`); 644 | } 645 | readFile(file); 646 | }); 647 | }); 648 | 649 | previewModal = $('#previewModal'); 650 | previewImage = $('#previewImage'); 651 | 652 | previewModal.addEventListener('click', function (e) { 653 | // 如果点击的是模态框本身（而不是图片），则关闭预览 654 | if (e.target === this) { 655 | closePreview(); 656 | } 657 | }); 658 | 659 | // 添加预览图片的点击事件 660 | previewImage.addEventListener('click', function (e) { 661 | e.stopPropagation(); // 阻止事件冒泡到模态框 662 | closePreview(); 663 | }); 664 | 665 | // 抽取关闭预览的函数 666 | function closePreview() { 667 | const modal = document.getElementById('previewModal'); 668 | const previewImg = document.getElementById('previewImage'); 669 | 670 | modal.classList.remove('active'); 671 | 672 | // 等待过渡动画完成后清理资源 673 | setTimeout(() => { 674 | modal.style.display = 'none'; 675 | modal.classList.remove('loading'); 676 | if (previewImg.src.startsWith('blob:')) { 677 | URL.revokeObjectURL(previewImg.src); 678 | } 679 | previewImg.src = ''; 680 | previewImg.classList.remove('blur'); 681 | }, 300); 682 | } 683 | 684 | const uploadBox = $('.upload-box'); 685 | 686 | uploadBox.addEventListener('dragover', (e) => { 687 | e.preventDefault(); 688 | e.stopPropagation(); 689 | uploadBox.classList.add('dragover'); 690 | }); 691 | 692 | uploadBox.addEventListener('dragleave', (e) => { 693 | e.preventDefault(); 694 | e.stopPropagation(); 695 | uploadBox.classList.remove('dragover'); 696 | }); 697 | 698 | uploadBox.addEventListener('drop', (e) => { 699 | e.preventDefault(); 700 | e.stopPropagation(); 701 | uploadBox.classList.remove('dragover'); 702 | 703 | const files = [...e.dataTransfer.files]; 704 | files.forEach(file => { 705 | if (!isImageTypeSupported(file)) { 706 | const supportedFormats = Object.values(SUPPORTED_IMAGE_TYPES).flat().join('、'); 707 | return alert(`不支持的图片格式。支持的格式：${supportedFormats}`); 708 | } 709 | readFile(file); 710 | }); 711 | }); 712 | 713 | // 添加删除所有照片的函数 714 | function deleteAll() { 715 | if (allCanvas.length === 0) { 716 | alert('没有可删除的图片'); 717 | return; 718 | } 719 | 720 | if (confirm('确定要删除所有图片吗？')) { 721 | // 清空数组 722 | allCanvas.length = 0; 723 | // 清空显示区域 724 | const graph = document.getElementById('graph'); 725 | graph.innerHTML = ''; 726 | graph.classList.add('empty'); 727 | } 728 | } 729 | 730 | // 修改 downloadAll 函数 731 | function downloadAll() { 732 | const btn = document.querySelector('.btn-primary'); 733 | if (allCanvas.length === 0) { 734 | alert('没有可下载的图片'); 735 | return; 736 | } 737 | 738 | btn.classList.add('loading'); 739 | 740 | // 检查是否加载了 JSZip 741 | if (typeof JSZip === 'undefined') { 742 | alert('正在加载必要组件，请稍后再试'); 743 | btn.classList.remove('loading'); 744 | return; 745 | } 746 | 747 | // 创建进度提示元素 748 | let progressElement = document.getElementById('downloadProgress'); 749 | if (!progressElement) { 750 | progressElement = createProgressElement(); 751 | btn.parentNode.insertBefore(progressElement, btn.nextSibling); 752 | } 753 | 754 | const progressBar = progressElement.querySelector('.progress-inner'); 755 | const progressText = progressElement.querySelector('.progress-text'); 756 | const progressEta = progressElement.querySelector('.progress-eta'); 757 | const cancelBtn = progressElement.querySelector('.cancel-btn'); 758 | const retryBtn = progressElement.querySelector('.retry-btn'); 759 | 760 | progressElement.style.display = 'block'; 761 | progressBar.style.width = '0%'; 762 | retryBtn.style.display = 'none'; 763 | cancelBtn.style.display = 'block'; 764 | 765 | // 取消下载标志和控制器 766 | let isCancelled = false; 767 | let abortController = new AbortController(); 768 | 769 | // 添加取消下载功能 770 | cancelBtn.onclick = () => { 771 | if (confirm('确定要取消下载吗？')) { 772 | isCancelled = true; 773 | abortController.abort(); // 中断所有操作 774 | progressText.textContent = '已取消下载'; 775 | setTimeout(() => { 776 | progressElement.style.display = 'none'; 777 | btn.classList.remove('loading'); 778 | }, 500); 779 | showToast('已取消下载'); 780 | } 781 | }; 782 | 783 | // 添加重试功能 784 | let retryCount = 0; 785 | const maxRetries = 3; 786 | 787 | const startDownload = () => { 788 | // 重置控制器 789 | abortController = new AbortController(); 790 | const signal = abortController.signal; 791 | 792 | const zip = new JSZip(); 793 | const total = allCanvas.length; 794 | let completed = 0; 795 | let startTime = Date.now(); 796 | 797 | // 根据设备性能自动调整 chunkSize 798 | const determineChunkSize = () => { 799 | const memory = navigator?.deviceMemory || 4; // 默认4GB内存 800 | const cores = navigator?.hardwareConcurrency || 4; // 默认4核 801 | 802 | // 根据设备性能计算合适的chunkSize 803 | const baseSize = Math.floor(Math.min(memory, cores) * 1.5); 804 | return Math.max(3, Math.min(baseSize, 10)); // 最小3,最大10 805 | }; 806 | 807 | const chunkSize = determineChunkSize(); 808 | const chunks = []; 809 | 810 | for (let i = 0; i < allCanvas.length; i += chunkSize) { 811 | chunks.push(allCanvas.slice(i, i + chunkSize)); 812 | } 813 | 814 | // 更新预估时间 815 | const updateETA = (completed) => { 816 | if (completed === 0) return; 817 | 818 | const elapsed = Date.now() - startTime; 819 | const rate = completed / elapsed; // 每毫秒处理的数量 820 | const remaining = total - completed; 821 | const eta = remaining / rate; // 预估剩余毫秒数 822 | 823 | const formatTime = (ms) => { 824 | if (ms < 60000) return `${Math.ceil(ms / 1000)}秒`; 825 | return `${Math.ceil(ms / 60000)}分钟`; 826 | }; 827 | 828 | progressEta.textContent = `预计剩余时间: ${formatTime(eta)}`; 829 | }; 830 | 831 | // 处理单个图片的函数 832 | const processImage = (item) => { 833 | return new Promise((resolve, reject) => { 834 | // 检查是否已取消 835 | if (signal.aborted) { 836 | reject(new Error('用户取消下载')); 837 | return; 838 | } 839 | 840 | const attempt = (retryCount = 0) => { 841 | item.canvas.toBlob((blob) => { 842 | // 再次检查是否已取消 843 | if (signal.aborted) { 844 | reject(new Error('用户取消下载')); 845 | return; 846 | } 847 | 848 | if (!blob) { 849 | if (retryCount < 3) { 850 | setTimeout(() => attempt(retryCount + 1), 1000); 851 | return; 852 | } 853 | reject(new Error('转换图片失败')); 854 | return; 855 | } 856 | 857 | let fileName = item.fileName.replace(/\.[^/.]+$/, "") + '.png'; 858 | zip.file(fileName, blob); 859 | completed++; 860 | 861 | // 更新进度 862 | const progress = (completed / total * 100).toFixed(1); 863 | progressBar.style.width = progress + '%'; 864 | progressText.textContent = `正在处理: ${completed}/${total} (${progress}%)`; 865 | updateETA(completed); 866 | 867 | resolve(); 868 | }, 'image/png'); 869 | }; 870 | 871 | attempt(); 872 | }); 873 | }; 874 | 875 | // 按组处理图片 876 | return chunks.reduce((promise, chunk) => { 877 | return promise.then(() => { 878 | // 检查是否已取消 879 | if (signal.aborted) { 880 | throw new Error('用户取消下载'); 881 | } 882 | return Promise.all(chunk.map(processImage)); 883 | }); 884 | }, Promise.resolve()) 885 | .then(() => { 886 | // 检查是否已取消 887 | if (signal.aborted) { 888 | throw new Error('用户取消下载'); 889 | } 890 | 891 | progressText.textContent = '正在生成压缩包...'; 892 | 893 | return zip.generateAsync({ 894 | type: 'blob', 895 | compression: 'DEFLATE', 896 | compressionOptions: {level: 6} 897 | }, (metadata) => { 898 | // 检查是否已取消 899 | if (signal.aborted) { 900 | throw new Error('用户取消下载'); 901 | } 902 | if (metadata.percent) { 903 | const progress = metadata.percent.toFixed(1); 904 | progressBar.style.width = progress + '%'; 905 | progressText.textContent = `正在压缩: ${progress}%`; 906 | } 907 | }); 908 | }) 909 | .then((content) => { 910 | // 最后一次检查是否已取消 911 | if (signal.aborted) { 912 | throw new Error('用户取消下载'); 913 | } 914 | 915 | const link = document.createElement('a'); 916 | link.href = URL.createObjectURL(content); 917 | link.download = '水印图片_' + new Date().getTime() + '.zip'; 918 | document.body.appendChild(link); 919 | link.click(); 920 | document.body.removeChild(link); 921 | URL.revokeObjectURL(link.href); 922 | 923 | setTimeout(() => { 924 | progressElement.style.display = 'none'; 925 | progressBar.style.width = '0%'; 926 | btn.classList.remove('loading'); 927 | showToast('下载完成！'); 928 | }, 1000); 929 | }); 930 | }; 931 | 932 | // 开始下载并处理错误 933 | startDownload().catch((error) => { 934 | console.error('下载失败:', error); 935 | 936 | // 如果是用户取消，不显示错误 937 | if (error.message === '用户取消下载') { 938 | return; 939 | } 940 | 941 | progressText.textContent = '下载失败'; 942 | cancelBtn.style.display = 'none'; 943 | 944 | if (retryCount < maxRetries) { 945 | retryBtn.style.display = 'block'; 946 | retryBtn.onclick = () => { 947 | retryCount++; 948 | retryBtn.style.display = 'none'; 949 | cancelBtn.style.display = 'block'; 950 | startDownload(); 951 | }; 952 | } else { 953 | progressElement.style.display = 'none'; 954 | btn.classList.remove('loading'); 955 | showToast('下载失败，请重试'); 956 | } 957 | }); 958 | } 959 | 960 | // 添加主题切换功能 961 | function toggleTheme() { 962 | const html = document.documentElement; 963 | const themeIcon = document.querySelector('.theme-icon'); 964 | const currentTheme = html.getAttribute('data-theme'); 965 | 966 | if (currentTheme === 'dark') { 967 | html.removeAttribute('data-theme'); 968 | themeIcon.textContent = '🌞'; 969 | localStorage.setItem('theme', 'light'); 970 | } else { 971 | html.setAttribute('data-theme', 'dark'); 972 | themeIcon.textContent = '🌙'; 973 | localStorage.setItem('theme', 'dark'); 974 | } 975 | } 976 | 977 | // 页面加载时检查主题设置 978 | document.addEventListener('DOMContentLoaded', () => { 979 | const savedTheme = localStorage.getItem('theme'); 980 | const themeIcon = document.querySelector('.theme-icon'); 981 | 982 | if (savedTheme === 'dark') { 983 | document.documentElement.setAttribute('data-theme', 'dark'); 984 | themeIcon.textContent = '🌙'; 985 | } 986 | }); 987 | 988 | // 优化移动端触摸体验 989 | function initTouchEvents() { 990 | // 防止双击缩放 991 | let lastTouchEnd = 0; 992 | document.addEventListener('touchend', (event) => { 993 | const now = Date.now(); 994 | if (now - lastTouchEnd <= 300) { 995 | event.preventDefault(); 996 | } 997 | lastTouchEnd = now; 998 | }, false); 999 | 1000 | // 优化触摸反馈 1001 | const buttons = document.querySelectorAll('button'); 1002 | buttons.forEach(button => { 1003 | button.addEventListener('touchstart', () => { 1004 | button.style.transform = 'scale(0.98)'; 1005 | }); 1006 | button.addEventListener('touchend', () => { 1007 | button.style.transform = 'none'; 1008 | }); 1009 | }); 1010 | } 1011 | 1012 | // 页面加载完成后初始化触摸事件 1013 | document.addEventListener('DOMContentLoaded', () => { 1014 | initTouchEvents(); 1015 | // 现有的 DOMContentLoaded 代码... 1016 | }); 1017 | 1018 | // 添加粘贴上传功能 1019 | document.addEventListener('paste', (e) => { 1020 | e.preventDefault(); 1021 | const items = e.clipboardData.items; 1022 | 1023 | for (let item of items) { 1024 | if (item.type.indexOf('image') !== -1) { 1025 | const file = item.getAsFile(); 1026 | if (isImageTypeSupported(file)) { 1027 | readFile(file); 1028 | } else { 1029 | const supportedFormats = Object.values(SUPPORTED_IMAGE_TYPES).flat().join('、'); 1030 | alert(`不支持的图片格式。支持的格式：${supportedFormats}`); 1031 | } 1032 | } 1033 | } 1034 | }); 1035 | 1036 | // 添加图片计数功能 1037 | // function updateImageCount() { 1038 | // const countElement = document.getElementById('imageCount'); 1039 | // if (!countElement) { 1040 | // const container = document.querySelector('.upload-container'); 1041 | // const countDiv = document.createElement('div'); 1042 | // countDiv.id = 'imageCount'; 1043 | // countDiv.style.marginTop = '10px'; 1044 | // countDiv.style.fontSize = '14px'; 1045 | // countDiv.style.color = 'var(--secondary-text)'; 1046 | // container.appendChild(countDiv); 1047 | // } 1048 | // const count = allCanvas.length; 1049 | // document.getElementById('imageCount').textContent = 1050 | // `已选择 ${count} 张图片${count > 0 ? '，可以拖动图片调整顺序' : ''}`; 1051 | // } 1052 | 1053 | // 添加拖拽排序功能 1054 | function initDragSort() { 1055 | const graph = document.getElementById('graph'); 1056 | let draggedItem = null; 1057 | 1058 | graph.addEventListener('dragstart', (e) => { 1059 | if (e.target.closest('.image-container')) { 1060 | draggedItem = e.target.closest('.image-container'); 1061 | e.target.style.opacity = '0.5'; 1062 | } 1063 | }); 1064 | 1065 | graph.addEventListener('dragend', (e) => { 1066 | if (e.target.closest('.image-container')) { 1067 | e.target.style.opacity = '1'; 1068 | } 1069 | }); 1070 | 1071 | graph.addEventListener('dragover', (e) => { 1072 | e.preventDefault(); 1073 | const container = e.target.closest('.image-container'); 1074 | if (container && container !== draggedItem) { 1075 | const rect = container.getBoundingClientRect(); 1076 | const midpoint = rect.x + rect.width / 2; 1077 | if (e.clientX < midpoint) { 1078 | container.style.borderLeft = '3px solid var(--button-primary)'; 1079 | container.style.borderRight = ''; 1080 | } else { 1081 | container.style.borderRight = '3px solid var(--button-primary)'; 1082 | container.style.borderLeft = ''; 1083 | } 1084 | } 1085 | }); 1086 | 1087 | graph.addEventListener('dragleave', (e) => { 1088 | const container = e.target.closest('.image-container'); 1089 | if (container) { 1090 | container.style.borderLeft = ''; 1091 | container.style.borderRight = ''; 1092 | } 1093 | }); 1094 | 1095 | graph.addEventListener('drop', (e) => { 1096 | e.preventDefault(); 1097 | const container = e.target.closest('.image-container'); 1098 | if (container && draggedItem) { 1099 | const rect = container.getBoundingClientRect(); 1100 | const midpoint = rect.x + rect.width / 2; 1101 | const insertAfter = e.clientX > midpoint; 1102 | 1103 | if (insertAfter) { 1104 | container.parentNode.insertBefore(draggedItem, container.nextSibling); 1105 | } else { 1106 | container.parentNode.insertBefore(draggedItem, container); 1107 | } 1108 | 1109 | // 更新 allCanvas 数组顺序 1110 | const newOrder = [...graph.children].map(child => { 1111 | return allCanvas.find(item => item.canvas === child.querySelector('canvas')); 1112 | }); 1113 | allCanvas.length = 0; 1114 | allCanvas.push(...newOrder); 1115 | } 1116 | 1117 | // 清除所有边框样式 1118 | graph.querySelectorAll('.image-container').forEach(container => { 1119 | container.style.borderLeft = ''; 1120 | container.style.borderRight = ''; 1121 | }); 1122 | }); 1123 | } 1124 | 1125 | // 在页面加载完成后初始化拖拽排序 1126 | document.addEventListener('DOMContentLoaded', () => { 1127 | initDragSort(); 1128 | // ... 其他初始化代码 ... 1129 | }); 1130 | 1131 | // 添加布局方式切换的事件监听 1132 | document.addEventListener('DOMContentLoaded', () => { 1133 | const patternSelect = document.getElementById('watermarkPattern'); 1134 | const customControls = document.getElementById('customPatternControls'); 1135 | const positionControls = document.getElementById('positionControls'); 1136 | 1137 | patternSelect.addEventListener('change', () => { 1138 | const pattern = patternSelect.value; 1139 | customControls.style.display = pattern === 'custom' ? 'block' : 'none'; 1140 | positionControls.style.display = pattern === 'single' ? 'block' : 'none'; 1141 | 1142 | // 更新所有画布 1143 | allCanvas.forEach(({canvas, img}) => { 1144 | drawText(canvas, img); 1145 | }); 1146 | }); 1147 | 1148 | // 初始化其他控件的事件监听 1149 | ['watermarkCount', 'watermarkPosition'].forEach(id => { 1150 | const element = document.getElementById(id); 1151 | if (element) { 1152 | element.addEventListener('change', () => { 1153 | allCanvas.forEach(({canvas, img}) => { 1154 | drawText(canvas, img); 1155 | }); 1156 | }); 1157 | } 1158 | }); 1159 | }); 1160 | 1161 | // 添加角度显示的实时更新 1162 | document.addEventListener('DOMContentLoaded', () => { 1163 | const rotateInput = document.getElementById('rotate'); 1164 | const rotateValue = document.getElementById('rotateValue'); 1165 | 1166 | rotateInput.addEventListener('input', () => { 1167 | rotateValue.textContent = `${rotateInput.value}°`; 1168 | }); 1169 | 1170 | // ... 其他初始化代码 ... 1171 | }); 1172 | 1173 | document.addEventListener('DOMContentLoaded', () => { 1174 | const textInput = document.getElementById('text'); 1175 | 1176 | // 处理粘贴事件 1177 | textInput.addEventListener('paste', (e) => { 1178 | e.preventDefault(); 1179 | 1180 | // 获取粘贴的文本 1181 | const pastedText = (e.clipboardData || window.clipboardData).getData('text'); 1182 | 1183 | // 将文本插入到当前光标位置 1184 | const start = textInput.selectionStart; 1185 | // const end = textInput.selectionEnd; 1186 | // const text = textInput.value; 1187 | // const newText = text.slice(0, start) + pastedText + text.slice(end); 1188 | textInput.value = newText; 1189 | 1190 | // 更新光标位置 1191 | const newCursorPos = start + pastedText.length; 1192 | textInput.setSelectionRange(newCursorPos, newCursorPos); 1193 | 1194 | // 触发 input 事件以更新水印 1195 | textInput.dispatchEvent(new Event('input')); 1196 | }); 1197 | 1198 | // 优化输入体验 1199 | textInput.addEventListener('keydown', (e) => { 1200 | if (e.key === 'Enter') { 1201 | e.preventDefault(); // 防止回车提交表单 1202 | textInput.blur(); // 失去焦点 1203 | } 1204 | }); 1205 | 1206 | // 添加输入限制（可选） 1207 | textInput.addEventListener('input', () => { 1208 | // 如果需要限制输入长度，可以在这里添加 1209 | if (textInput.value.length > 100) { // 假设最大长度为100 1210 | textInput.value = textInput.value.slice(0, 100); 1211 | } 1212 | }); 1213 | }); 1214 | 1215 | // 添加复制到剪贴板的函数 1216 | function copyImageToClipboard(canvas) { 1217 | canvas.toBlob(blob => { 1218 | try { 1219 | const item = new ClipboardItem({"image/png": blob}); 1220 | navigator.clipboard.write([item]).then(() => { 1221 | // 显示成功提示 1222 | showToast('图片已复制到剪贴板'); 1223 | }).catch(err => { 1224 | console.error('复制失败:', err); 1225 | showToast('复制失败，请重试'); 1226 | }); 1227 | } catch (err) { 1228 | console.error('复制失败:', err); 1229 | showToast('您的浏览器不支持此功能'); 1230 | } 1231 | }, 'image/png'); 1232 | } 1233 | 1234 | // 添加提示框功能 1235 | function showToast(message) { 1236 | // 检查是否已存在toast元素 1237 | let toast = document.getElementById('toast'); 1238 | if (!toast) { 1239 | toast = document.createElement('div'); 1240 | toast.id = 'toast'; 1241 | document.body.appendChild(toast); 1242 | } 1243 | 1244 | // 设置消息并显示 1245 | toast.textContent = message; 1246 | toast.classList.add('show'); 1247 | 1248 | // 3秒后隐藏 1249 | setTimeout(() => { 1250 | toast.classList.remove('show'); 1251 | }, 3000); 1252 | } 1253 | 1254 | // 修改 showPreview 函数，优化性能 1255 | function showPreview(canvas, direction = null) { 1256 | const modal = document.getElementById('previewModal'); 1257 | const previewImg = document.getElementById('previewImage'); 1258 | 1259 | // 添加加载状态 1260 | modal.classList.add('loading'); 1261 | modal.style.display = 'flex'; 1262 | 1263 | // 存储当前预览的画布索引 1264 | const currentIndex = allCanvas.findIndex(item => item.canvas === canvas); 1265 | previewModal.dataset.currentCanvas = currentIndex; 1266 | 1267 | // 预加载相邻图片 1268 | const preloadAdjacentImages = () => { 1269 | const prevIndex = currentIndex > 0 ? currentIndex - 1 : allCanvas.length - 1; 1270 | const nextIndex = currentIndex < allCanvas.length - 1 ? currentIndex + 1 : 0; 1271 | 1272 | [prevIndex, nextIndex].forEach(index => { 1273 | const adjacentCanvas = allCanvas[index].canvas; 1274 | if (adjacentCanvas) { 1275 | const link = document.createElement('link'); 1276 | link.rel = 'preload'; 1277 | link.as = 'image'; 1278 | link.href = adjacentCanvas.toDataURL('image/jpeg', 0.5); 1279 | document.head.appendChild(link); 1280 | setTimeout(() => document.head.removeChild(link), 1000); 1281 | } 1282 | }); 1283 | }; 1284 | 1285 | // 优化过渡动画 1286 | const applyTransition = () => { 1287 | if (direction) { 1288 | previewImg.style.transition = 'transform 0.2s ease-out'; 1289 | previewImg.style.transform = `translateX(${direction === 'prev' ? '100%' : '-100%'})`; 1290 | 1291 | requestAnimationFrame(() => { 1292 | previewImg.style.transform = 'translateX(0)'; 1293 | }); 1294 | } 1295 | }; 1296 | 1297 | // 使用 createImageBitmap 优化图片处理 1298 | createImageBitmap(canvas) 1299 | .then(bitmap => { 1300 | const thumbnailCanvas = document.createElement('canvas'); 1301 | const maxThumbnailSize = 800; 1302 | const scale = Math.min(1, maxThumbnailSize / Math.max(canvas.width, canvas.height)); 1303 | thumbnailCanvas.width = canvas.width * scale; 1304 | thumbnailCanvas.height = canvas.height * scale; 1305 | 1306 | const ctx = thumbnailCanvas.getContext('2d'); 1307 | ctx.drawImage(bitmap, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height); 1308 | 1309 | // 先显示缩略图 1310 | previewImg.src = thumbnailCanvas.toDataURL('image/jpeg', 0.5); 1311 | previewImg.classList.add('blur'); 1312 | 1313 | // 应用过渡动画 1314 | applyTransition(); 1315 | 1316 | requestAnimationFrame(() => { 1317 | modal.classList.add('active'); 1318 | 1319 | // 使用 OffscreenCanvas 进行高质量渲染（如果支持） 1320 | const renderHighQuality = () => { 1321 | if (typeof OffscreenCanvas !== 'undefined') { 1322 | const offscreen = new OffscreenCanvas(canvas.width, canvas.height); 1323 | const octx = offscreen.getContext('2d'); 1324 | octx.drawImage(canvas, 0, 0); 1325 | return offscreen.convertToBlob({type: 'image/jpeg', quality: 0.92}); 1326 | } else { 1327 | return new Promise(resolve => { 1328 | canvas.toBlob(resolve, 'image/jpeg', 0.92); 1329 | }); 1330 | } 1331 | }; 1332 | 1333 | renderHighQuality().then(blob => { 1334 | const url = URL.createObjectURL(blob); 1335 | const highQualityImg = new Image(); 1336 | 1337 | highQualityImg.onload = () => { 1338 | previewImg.src = url; 1339 | previewImg.classList.remove('blur'); 1340 | modal.classList.remove('loading'); 1341 | 1342 | // 清理资源 1343 | bitmap.close(); 1344 | thumbnailCanvas.remove(); 1345 | URL.revokeObjectURL(url); 1346 | 1347 | // 预加载相邻图片 1348 | preloadAdjacentImages(); 1349 | }; 1350 | 1351 | highQualityImg.src = url; 1352 | }); 1353 | }); 1354 | }) 1355 | .catch(error => { 1356 | console.error('图片处理失败:', error); 1357 | modal.classList.remove('loading'); 1358 | showToast('图片加载失败，请重试'); 1359 | }); 1360 | } 1361 | 1362 | // 优化图片切换函数 1363 | function switchPreviewImage(direction) { 1364 | const currentIndex = parseInt(previewModal.dataset.currentCanvas); 1365 | if (isNaN(currentIndex) || allCanvas.length <= 1) return; 1366 | 1367 | let nextIndex; 1368 | if (direction === 'prev') { 1369 | nextIndex = currentIndex > 0 ? currentIndex - 1 : allCanvas.length - 1; 1370 | } else { 1371 | nextIndex = currentIndex < allCanvas.length - 1 ? currentIndex + 1 : 0; 1372 | } 1373 | 1374 | showPreview(allCanvas[nextIndex].canvas, direction); 1375 | } 1376 | 1377 | // 修改键盘事件监听中的图片切换部分 1378 | document.addEventListener('keydown', (e) => { 1379 | if (previewModal.style.display === 'flex') { 1380 | if (e.key === 'ArrowLeft') { 1381 | e.preventDefault(); 1382 | switchPreviewImage('prev'); 1383 | } else if (e.key === 'ArrowRight') { 1384 | e.preventDefault(); 1385 | switchPreviewImage('next'); 1386 | } 1387 | } 1388 | }); 1389 | 1390 | // 添加触摸滑动支持 1391 | let touchStartX = 0; 1392 | previewModal.addEventListener('touchstart', (e) => { 1393 | touchStartX = e.touches[0].clientX; 1394 | }); 1395 | 1396 | previewModal.addEventListener('touchend', (e) => { 1397 | const touchEndX = e.changedTouches[0].clientX; 1398 | const diff = touchEndX - touchStartX; 1399 | 1400 | if (Math.abs(diff) > 50) { // 最小滑动距离 1401 | if (diff > 0) { 1402 | switchPreviewImage('prev'); 1403 | } else { 1404 | switchPreviewImage('next'); 1405 | } 1406 | } 1407 | }); 1408 | 1409 | // 添加预览导航按钮（可选） 1410 | const navigationHtml = ` 1411 | 1412 | 1413 | `; 1414 | 1415 | previewModal.insertAdjacentHTML('beforeend', navigationHtml); 1416 | 1417 | 1418 | /** 1419 | * 水印渲染器类 1420 | * 负责处理水印的绘制和样式设置 1421 | */ 1422 | class WatermarkRenderer { 1423 | /** 1424 | * 构造函数 1425 | * @param {HTMLCanvasElement} canvas - 目标画布 1426 | * @param {Object} config - 水印配置 1427 | */ 1428 | constructor(canvas, config) { 1429 | this.canvas = canvas; 1430 | this.ctx = canvas.getContext('2d'); 1431 | // this.config = config; 1432 | 1433 | // 初始化缓存 1434 | this.initCache(); 1435 | } 1436 | 1437 | /** 1438 | * 初始化计算缓存 1439 | * @private 1440 | */ 1441 | // initCache() { 1442 | // this._cache = { 1443 | // diagonal: 0, 1444 | // fontSize: 0, 1445 | // style: null, 1446 | // configHash: null, 1447 | // textMetrics: new Map() 1448 | // }; 1449 | // } 1450 | 1451 | /** 1452 | * 渲染水印 1453 | * @param {HTMLImageElement} img - 源图片 1454 | */ 1455 | render(img) { 1456 | this.clearCanvas(); 1457 | this.drawImage(img); 1458 | this.drawWatermark(); 1459 | } 1460 | 1461 | /** 1462 | * 清空画布 1463 | * @private 1464 | */ 1465 | clearCanvas() { 1466 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 1467 | } 1468 | 1469 | /** 1470 | * 绘制源图片 1471 | * @private 1472 | * @param {HTMLImageElement} img - 源图片 1473 | */ 1474 | drawImage(img) { 1475 | this.ctx.drawImage(img, 0, 0); 1476 | } 1477 | 1478 | } 1479 | 1480 | /** 1481 | * 文件处理类 1482 | * 负责处理文件上传和读取 1483 | */ 1484 | class FileHandler { 1485 | /** 1486 | * 构造函数 1487 | * @param {Object} options - 配置选项 1488 | * @param {Function} options.onFileRead - 文件读取成功回调 1489 | * @param {Function} options.onError - 错误处理回调 1490 | */ 1491 | constructor(options = {}) { 1492 | this.onFileRead = options.onFileRead; 1493 | this.onError = options.onError; 1494 | } 1495 | 1496 | // ... 其他方法 1497 | } 1498 | 1499 | /** 1500 | * UI 管理类 1501 | * 负责处理界面交互和事件绑定 1502 | */ 1503 | class WatermarkUI { 1504 | constructor() { 1505 | this.initElements(); 1506 | this.bindEvents(); 1507 | } 1508 | 1509 | // ... 其他方法 1510 | } 1511 | 1512 | // 初始化应用 1513 | document.addEventListener('DOMContentLoaded', () => { 1514 | const ui = new WatermarkUI(); 1515 | const fileHandler = new FileHandler({ 1516 | onFileRead: (img, file) => { 1517 | const canvas = document.createElement('canvas'); 1518 | const renderer = new WatermarkRenderer(canvas, configInputSetting); 1519 | renderer.render(img); 1520 | ui.addImageToGallery(canvas, file.name); 1521 | }, 1522 | onError: (msg) => ui.showError(msg) 1523 | }); 1524 | }); 1525 | 1526 | // 修改进度条HTML结构 1527 | function createProgressElement() { 1528 | const progressElement = document.createElement('div'); 1529 | progressElement.id = 'downloadProgress'; 1530 | progressElement.className = 'download-progress'; 1531 | progressElement.innerHTML = ` 1532 |
1533 |
准备下载...
1534 |
1535 |
1536 |
1537 |
1538 |
1539 |
1540 | 1544 | 1548 |
1549 | `; 1550 | return progressElement; 1551 | } 1552 | 1553 | 1554 | // 添加键盘快捷键支持 1555 | document.addEventListener('keydown', (e) => { 1556 | // 如果正在输入文本,不触发快捷键 1557 | if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { 1558 | return; 1559 | } 1560 | 1561 | // Ctrl/Command + D: 下载全部图片 1562 | if ((e.ctrlKey || e.metaKey) && e.key === 'd') { 1563 | e.preventDefault(); 1564 | downloadAll(); 1565 | } 1566 | 1567 | // Delete: 删除全部图片 1568 | if (e.key === 'Delete') { 1569 | e.preventDefault(); 1570 | deleteAll(); 1571 | } 1572 | 1573 | // Ctrl/Command + V: 触发粘贴 1574 | if ((e.ctrlKey || e.metaKey) && e.key === 'v') { 1575 | // 已有粘贴事件处理,无需额外处理 1576 | return; 1577 | } 1578 | 1579 | // Escape: 关闭预览 1580 | if (e.key === 'Escape' && previewModal.style.display === 'flex') { 1581 | e.preventDefault(); 1582 | closePreview(); 1583 | } 1584 | 1585 | // 左右方向键: 在预览模式下切换图片 1586 | if (previewModal.style.display === 'flex' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) { 1587 | e.preventDefault(); 1588 | const currentCanvas = allCanvas.find(item => 1589 | item.canvas.toDataURL() === previewImage.src || 1590 | URL.createObjectURL(dataURItoBlob(item.canvas.toDataURL())) === previewImage.src 1591 | ); 1592 | if (currentCanvas) { 1593 | const currentIndex = allCanvas.indexOf(currentCanvas); 1594 | let nextIndex; 1595 | if (e.key === 'ArrowLeft') { 1596 | nextIndex = currentIndex > 0 ? currentIndex - 1 : allCanvas.length - 1; 1597 | } else { 1598 | nextIndex = currentIndex < allCanvas.length - 1 ? currentIndex + 1 : 0; 1599 | } 1600 | showPreview(allCanvas[nextIndex].canvas); 1601 | } 1602 | } 1603 | 1604 | // 数字键1-9: 快速调整水印大小 1605 | if (!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && /^[1-9]$/.test(e.key)) { 1606 | e.preventDefault(); 1607 | const sizeInput = document.getElementById('size'); 1608 | const newSize = parseFloat(e.key) / 3; // 将1-9映射到0.33-3的范围 1609 | sizeInput.value = newSize; 1610 | sizeInput.dispatchEvent(new Event('input')); 1611 | } 1612 | 1613 | // Ctrl/Command + Z: 撤销最后一次删除 1614 | if ((e.ctrlKey || e.metaKey) && e.key === 'z') { 1615 | e.preventDefault(); 1616 | if (lastDeletedCanvas) { 1617 | const container = document.createElement('div'); 1618 | container.className = 'image-container'; 1619 | container.appendChild(lastDeletedCanvas.canvas); 1620 | graph.appendChild(container); 1621 | allCanvas.push(lastDeletedCanvas); 1622 | lastDeletedCanvas = null; 1623 | showToast('已恢复上一次删除的图片'); 1624 | } 1625 | } 1626 | }); 1627 | 1628 | // 添加变量用于存储最后删除的图片 1629 | let lastDeletedCanvas = null; 1630 | 1631 | // 修改删除按钮的点击处理函数 1632 | const deleteBtn = document.createElement('button'); 1633 | deleteBtn.className = 'download-btn delete-btn'; 1634 | deleteBtn.textContent = '删除'; 1635 | deleteBtn.onclick = (e) => { 1636 | e.stopPropagation(); 1637 | const index = allCanvas.findIndex(item => item.canvas === canvas); 1638 | if (index > -1) { 1639 | lastDeletedCanvas = allCanvas[index]; // 保存被删除的图片 1640 | allCanvas.splice(index, 1); 1641 | } 1642 | container.remove(); 1643 | 1644 | if (graph.children.length === 0) { 1645 | graph.classList.add('empty'); 1646 | } 1647 | showToast('图片已删除，按 Ctrl+Z 可恢复'); 1648 | }; 1649 | 1650 | // 添加键盘快捷键提示到页面上 1651 | const shortcutsHtml = ` 1652 |
1653 |

键盘快捷键:

1654 |
    1655 |
  • ⌘/Ctrl + D: 下载全部图片
    • 1656 |
  • ⌘/Ctrl + V: 粘贴图片
    • 1657 |
  • Delete: 删除全部图片
    • 1658 |
  • ⌘/Ctrl + Z: 撤销删除
    • 1659 |
  • Esc: 关闭预览
    • 1660 |
  • ←/→: 预览时切换图片
    • 1661 |
  • 1-9: 快速调整水印大小
    • 1662 |
1663 |
1664 | `; 1665 | 1666 | // 将快捷键说明添加到页面中 1667 | document.querySelector('article').insertAdjacentHTML('afterend', shortcutsHtml); 1668 | 1669 | // 在 后面添加模板选择按钮组 1670 | const textInput = document.querySelector('#text').parentElement; 1671 | const templateHtml = ` 1672 |
1673 | 1674 | 1675 | 1676 | 1677 | 1678 | 1679 |
1680 | `; 1681 | 1682 | textInput.insertAdjacentHTML('beforeend', templateHtml); 1683 | 1684 | // 添加模板按钮点击事件 1685 | document.querySelectorAll('.template-btn').forEach(btn => { 1686 | btn.addEventListener('click', () => { 1687 | const text = btn.dataset.text; 1688 | const textInput = document.getElementById('text'); 1689 | textInput.value = text; 1690 | textInput.dispatchEvent(new Event('input')); // 触发更新水印 1691 | 1692 | // 添加点击反馈 1693 | btn.style.transform = 'scale(0.95)'; 1694 | setTimeout(() => btn.style.transform = '', 100); 1695 | }); 1696 | }); 1697 | 1698 | // 尝试加载本地 jszip 1699 | function loadJSZip() { 1700 | return new Promise((resolve, reject) => { 1701 | const script = document.createElement('script'); 1702 | script.src = './js/jszip.min.js'; 1703 | script.onload = resolve; 1704 | script.onerror = () => { 1705 | // 本地加载失败，尝试从 CDN 加载 1706 | const cdnScript = document.createElement('script'); 1707 | cdnScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'; 1708 | cdnScript.onload = resolve; 1709 | cdnScript.onerror = reject; 1710 | document.head.appendChild(cdnScript); 1711 | }; 1712 | document.head.appendChild(script); 1713 | }); 1714 | } 1715 | 1716 | // 页面加载完成后加载 JSZip 1717 | document.addEventListener('DOMContentLoaded', () => { 1718 | loadJSZip().catch(err => { 1719 | console.error('JSZip 加载失败:', err); 1720 | alert('组件加载失败，部分功能可能无法使用。请检查网络连接后刷新页面重试。'); 1721 | }); 1722 | }); 1723 | --------------------------------------------------------------------------------