所有操作在浏览器本地完成，图片不上传任何服务器。免费，无需注册，打开即用。

🔗 工具地址

👉点击体验

---

🎯 和传统工具的区别

传统在线工具	本工具
图片上传到服务器处理	🟢 浏览器本地处理，零上传
担心隐私泄露	🟢 数据不出本地，隐私 100% 安全
需要注册/付费	🟢 免费，无需注册，打开即用
速度依赖网络	🟢 本地处理，速度取决于你的电脑
需要下载安装	🟢 纯 Web 应用，浏览器打开就能用

---

✨ 核心功能

• 🗜️图片压缩— 三档策略，Web Worker 异步处理不阻塞 UI
• 🎨实时调色— 亮度/对比度/饱和度/色温，逐像素计算实时预览
• 🔄格式转换— PNG / JPG / WebP 互转，quality 参数控制输出质量
• 💧水印引擎— 文字水印 / 图片水印，9 宫格定位 + 平铺模式
• 📐尺寸调整— 等比缩放 / 自定义尺寸
• 📦批量处理— 多张图片一键搞定，JSZip 打包下载

---

🛠️ 技术栈

技术	版本	用途
React	19	UI 框架
TypeScript	6	类型系统
Vite	8	构建工具
Tailwind CSS	4	原子化样式
React Router	7	客户端路由
browser-image-compression	2.0	图片压缩（支持 Web Worker）
JSZip	3.10	批量 ZIP 打包
Canvas 2D API	浏览器内置	抠图/调色/转换/水印的核心引擎

---

🔧 核心原理与关键实现

所有图片操作通过 Canvas 2D API 和 JavaScript 库在浏览器端完成，不涉及任何服务器端处理。

1️⃣ 图片压缩：Web Worker 异步处理

使用browser-image-compression库，启用 Web Worker 异步处理，不阻塞 UI。支持三档压缩策略，通过控制maxSizeMB和initialQuality参数实现不同压缩效果。

import imageCompression from 'browser-image-compression' const compressImage = async (file, options) => { const blob = await imageCompression(file, { maxSizeMB: options.maxSizeMB, maxWidthOrHeight: 4096, useWebWorker: true, initialQuality: options.quality, fileType: file.type }) return blob }

2️⃣ 调色引擎：像素级实时计算

基于 Canvas 2D 的 ImageData 像素级操作，逐像素计算亮度、对比度、饱和度、色温等参数，实现实时预览。

const adjustImageData = (data, settings) => { const d = data.data const brightness = settings.brightness * 2.55 const contrast = (settings.contrast + 100) / 100 const saturation = (settings.saturation + 100) / 100 for (let i = 0; i < d.length; i += 4) { let r = d[i], g = d[i + 1], b = d[i + 2] // 亮度调整 r += brightness; g += brightness; b += brightness // 对比度调整 r = ((r - 128) * contrast) + 128 g = ((g - 128) * contrast) + 128 b = ((b - 128) * contrast) + 128 // 饱和度调整 const gray = 0.299 * r + 0.587 * g + 0.114 * b r = gray + (r - gray) * saturation g = gray + (g - gray) * saturation b = gray + (b - gray) * saturation d[i] = Math.max(0, Math.min(255, r)) d[i + 1] = Math.max(0, Math.min(255, g)) d[i + 2] = Math.max(0, Math.min(255, b)) } }

3️⃣ 格式转换：Canvas toBlob 导出

利用 Canvas 的 toBlob API，将图片绘制到 Canvas 后以目标格式导出，通过 quality 参数控制输出质量。

const convertFormat = async (file, format, quality) => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') const img = await loadImage(file) canvas.width = img.naturalWidth canvas.height = img.naturalHeight ctx.drawImage(img, 0, 0) return new Promise((resolve, reject) => { canvas.toBlob( (blob) => blob ? resolve(blob) : reject(new Error('转换失败')), `image/${format}`, quality / 100 ) }) }

4️⃣ 水印引擎：9 宫格定位 + 平铺模式

通过 Canvas 的 fillText / drawImage + globalAlpha + rotate 实现文字和图片水印，支持 9 宫格定位和平铺模式。

const drawWatermark = (ctx, width, height, config) => { ctx.save() ctx.globalAlpha = config.opacity / 100 if (config.type === 'text') { ctx.font = `${config.fontSize}px ${config.fontFamily}` ctx.fillStyle = config.color ctx.translate(position.x, position.y) ctx.rotate((config.rotation * Math.PI) / 180) ctx.fillText(config.text, 0, 0) } ctx.restore() }

---

📊 构建产物

整个应用打包后非常轻量：

dist/index.html 0.70 KB dist/assets/index.css 31.23 KB（gzip 6.48 KB） dist/assets/index.js 441.18 KB（gzip 136.38 KB）

总计 gzip 后约 143 KB，首屏秒开。

---

💡 开发心得

1. 纯前端也能做图片处理— Canvas 2D API 足够强大，压缩、调色、转换、水印都能搞定，不需要后端
2. React 19 + Vite 8 体验很好— HMR 秒级更新，TypeScript 类型安全，开发效率高
3. Tailwind CSS 4 集成更简单— 不再需要 postcss.config.js，@import "tailwindcss" 一行搞定
4. 单文件开发 MVP— 所有代码集中在 App.tsx 里，快速迭代验证想法，后续再拆分模块
5. Cloudflare Pages 部署一条命令— wrangler pages deploy dist 上线，全球 CDN 免费

---

🚀 后续计划

• 🤖 接入真实 AI 抠图（ONNX Runtime Web + WebGPU）
• 📦 引入 WASM 压缩模块（libwebp / libavif）提升压缩效果
• 🎯 WebGL 加速调色渲染
• ⚡ 批量处理并行化（Web Worker 池）
• 📁 代码模块拆分（features/ + components/）

---

如果你觉得这个工具对你有帮助，欢迎体验并提出建议！右下角有反馈入口，可以直接给我发邮件。

如果觉得有用，点赞收藏⭐，让更多人看到！