现在做网站、做后台，图片处理几乎绕不开。用户上传头像要裁剪，商品图太大要压缩，缩略图糊了要高清缩放，上传完还想顺手清掉拍摄信息。这些需求要是自己从零写，canvas 那一套 API 又长又难调，移动端还容易翻车，一个上传功能能磨掉一整天。这次整理了 4 款开源免费、可商用的前端图片处理库，覆盖裁剪、压缩、缩放、EXIF 读写这四类最常见的场景，全都是浏览器端纯 JS，引到页面里就能跑起来。
四款库分别管什么
cropperjs 负责裁剪，拖拽裁剪框、自由比例或者固定比例、旋转翻转都支持，输出裁剪后的画布或者 base64，头像上传、商品图裁剪这类需求用它最合适。browser-image-compression 负责压缩，能在用户上传前把大图瘦身，设定最大体积、最大宽高和输出格式，方向和拍摄信息它会自动处理，图片体积能压到原来的几分之一，上传速度肉眼可见地快。pica 负责高质量缩放，缩放算法比 canvas 自带的清晰一截，还能跑在 Web Worker 里不卡界面，做图库缩略图很合适。piexifjs 负责读写 EXIF，图片的拍摄参数、方向、定位信息都能读、能改、能清。
一个典型的上传流程
这四款库其实可以串成一个完整的处理链。用户选完图，先用 piexifjs 读一下有没有多余信息，需要隐私保护的就清掉；接着用 cropperjs 让用户自己框选要保留的区域；裁剪完的图再用 browser-image-compression 压一遍，控制在合理体积；最后才提交上传。页面里如果还要生成缩略图展示，就交给 pica 来出图。整套流程走下来，用户端只需要点几下，服务器压力也小很多，传输的流量还能省下大半。
怎么接入、要多久上手
每个库都是单文件，用 script 标签引入，或者按项目用包管理器装一下都行。用法基本是两个动作，先把图片对象交给库的方法，再拿返回结果去渲染或者上传。有个细节要提醒，cropperjs 的 2.x 版本已经把样式内联进 JS 里了，不再单独提供 CSS 文件，引入 JS 就能用，网上很多老教程还在写引 CSS，照着做反而会找不到文件。压缩库的参数也建议按实际场景调，不要把清晰度压得太狠，用户的商品图糊了体验会差。
包里都有什么
压缩包按库名分成了四个目录，每个目录放的是压缩后的正式文件，直接引到页面就能用，不用跑构建、不用装依赖。除了核心 JS，还附带了各自的说明文档和许可文件，写清楚了基础用法和常见配置，拿到手照着看就行。整包体积很小，四个库加起来也就一百多 KB，放进项目里对加载速度几乎没影响，手机端打开也不会拖慢首屏，拿到手当天就能用起来。
图片处理这类需求，属于看起来很基础、真写起来又到处是坑的一类，兼容性和边界情况特别多。用现成的成熟库，能少走很多弯路，也省得为这些细节反复调试。这包已经按用途分好类，你按自己的场景挑一个或者几个组合着用就行，不必全上。四款库全部是 MIT 协议，可以免费商用、修改和再分发，保留许可文件即可。后面还会继续整理前端开发常用的工具合集，需要的可以先收藏。
暂无评论内容