做了个纯前端的图片工具箱:18 个工具,所有处理都在浏览器里

12 阅读1分钟

最近把日常处理图片的活儿攒成了一个站:压缩到指定 KB、格式互转、改尺寸裁剪、批量加水印、 长图切片/拼接、九宫格切图、证件照尺寸、二维码生成、多图合成 PDF、EXIF 查看与清除。

技术上的几个选择

没有后端,全部是 Canvas 加几个自己手写的库:

  • PDF 生成器自己写的:JPEG 直嵌 + DCTDecode 滤镜,用来做"图片转 PDF"和证件排版
  • 二维码编码器自己实现的:byte 模式、版本 1-10、纠错等级 M,Reed-Solomon 纠错 + 8 种掩码评分
  • ZIP 打包自己写的:store 模式 + 自己算 CRC32

零依赖的意思是:不需要 npm install,不会因为某个库停止维护而突然跑不起来。

为什么坚持"不上传"

大多数在线工具的工作方式是:上传到服务器 → 处理 → 下载回来。这带来三个问题: 隐私(证件照、合同留在别人硬盘上)、速度(取决于上传带宽)、限制(免费额度、尺寸上限)。

浏览器其实什么都能算,所以我把处理全放在本地,代价是吃用户设备的内存。

踩过的坑

  • PDF 的交叉引用表条目数算错一位,Chrome 能打开但 Acrobat 报"文件已损坏"
  • 二维码多块版本漏了交织,1-3 版本正常、7 以上全错
  • 给搜索引擎做 sitemap + IndexNow 主动推送,比干等收录快得多

另外

配了 3 篇使用教程(压缩到 100KB、长图切片、证件照尺寸与打印),中英双语,54 个页面。

地址:picartisan.com

想加什么工具可以直接在评论里说,需求集中我就做。