我用纯前端做了一个在线图片处理工具，零上传、免安装、隐私安全！
所有操作在浏览器本地完成图片不上传任何服务器。免费无需注册打开即用。 工具地址点击体验 和传统工具的区别传统在线工具本工具图片上传到服务器处理 浏览器本地处理零上传担心隐私泄露 数据不出本地隐私 100% 安全需要注册/付费 免费无需注册打开即用速度依赖网络 本地处理速度取决于你的电脑需要下载安装 纯 Web 应用浏览器打开就能用✨ 核心功能️图片压缩— 三档策略Web Worker 异步处理不阻塞 UI实时调色— 亮度/对比度/饱和度/色温逐像素计算实时预览格式转换— PNG / JPG / WebP 互转quality 参数控制输出质量水印引擎— 文字水印 / 图片水印9 宫格定位 平铺模式尺寸调整— 等比缩放 / 自定义尺寸批量处理— 多张图片一键搞定JSZip 打包下载️ 技术栈技术版本用途React19UI 框架TypeScript6类型系统Vite8构建工具Tailwind CSS4原子化样式React Router7客户端路由browser-image-compression2.0图片压缩支持 Web WorkerJSZip3.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 KBgzip 6.48 KB dist/assets/index.js 441.18 KBgzip 136.38 KB总计 gzip 后约 143 KB首屏秒开。 开发心得纯前端也能做图片处理— Canvas 2D API 足够强大压缩、调色、转换、水印都能搞定不需要后端React 19 Vite 8 体验很好— HMR 秒级更新TypeScript 类型安全开发效率高Tailwind CSS 4 集成更简单— 不再需要 postcss.config.jsimport tailwindcss 一行搞定单文件开发 MVP— 所有代码集中在 App.tsx 里快速迭代验证想法后续再拆分模块Cloudflare Pages 部署一条命令— wrangler pages deploy dist 上线全球 CDN 免费 后续计划 接入真实 AI 抠图ONNX Runtime Web WebGPU 引入 WASM 压缩模块libwebp / libavif提升压缩效果 WebGL 加速调色渲染⚡ 批量处理并行化Web Worker 池 代码模块拆分features/ components/如果你觉得这个工具对你有帮助欢迎体验并提出建议右下角有反馈入口可以直接给我发邮件。如果觉得有用点赞收藏⭐让更多人看到
)
