在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/
前言
在迭代图床应用时，需要用到图片压缩，在之前分享了使用 UPNG.js 压缩 PNG 图片，这里记录分享一下如何处理 JPG 图片。
搜罗调研了一圈，JPG 图片的处理，基本都是围绕 canvas 展开的。
- 掘金：前端实现图片压缩技术调研
- 相关开源库（近期还有迭代维护的）：Compressor.js，browser-image-compression。
如何判断图片是 JPG
同样第一步当然是判断图片类型，不然就没法正常的做后续处理了。
搜索了解了一下，JPG 图片的前三字节是固定的（16进制表示）：FF D8 FF。
下图是 VS Code 插件 Hex Editor 查看一个 JPG 图片的 16 进制表示信息。
于是可以根据这个特性判断，于是就有如下的判断代码。
function isJPG(file) { // 提取前3个字节 const arraybuffer = await file.slice(0, 3).arrayBuffer() // JPG 的前3字节16进制表示 const signature = [0xFF, 0xD8, 0xFF] // 转为 8位无符号整数数组 方便对比 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array const source = new Uint8Array(arraybuffer) // 逐个字节对比 return source.every((value, index) => value === signature[index]) } 当然社区也有现成的 is-jpg 库可以使用。
可看判断代码还是很简单的。
下面将先介绍一下上述两个开源库的简单用法与特色，最后再介绍一下直接使用 canvas API 压缩的方式以及注意事项。
Compressor.js
简介
JavaScript 图像压缩工具。使用浏览器原生的
canvas.toBlob API实现压缩，有损压缩，异步，在不同的浏览器压缩效果有所出入。一般可以用来在上传之前在客户端预压缩图像。
官方示例站点：Compressor.js PlayGround
使用
支持 npm 和 cdn 两种引入方式。
npm 加载
# 安装依赖 npm install compressorjs // 项目中引入使用 import Compressor from 'compressorjs' cdn 加载
<!-- html head 中引入 --> <script src='https://cdn.staticfile.net/compressorjs/1.2.1/compressor.min.js'></script> <!-- 项目中直接使用 Compressor 即可 --> 简单使用方式如下
// file 是待压缩图片的文件对象 new Compressor(file, { quality: 0.8, success(result) { // result 是压缩后的图片内容 } }) 其余的 option 选项可以参考官方文档，主要是尺寸大小，压缩质量效果，图片信息的保留等细节的调节。
简单封装
可以简单用 Promise 封装一下，使用更加方便。
async function compressJPGByCompressor(file, ops) { return new Promise((resolve, reject) => { new Compressor(file, { ...ops, success(result) { resolve(result) }, error(err) { reject(err) } }) }) } 当然这种不支持 Promise 的回调用法函数用 Promise.withResolvers 包装最合适不过了。
当然浏览器不支持这个API的话 需要引入 polyfill 才行（可以从 core-js 中引入，或自己简单实现一下）。
function compressJPGByCompressor(file, ops) { const { promise, resolve, reject } = Promise.withResolvers() new Compressor(file, { ...ops, success(result) { resolve(result) }, error(err) { reject(err) } }) return promise } browser-image-compression
简介
浏览器中实现图片压缩，通过降低分辨率或大小来压缩 jpeg、png、webp 和 bmp 图像；支持使用 Web Worker 实现多线程的非阻塞压缩。
官方示例站点：compression PlayGround
其中多线程压缩使用 OffscreenCanvas: 一个可以脱离屏幕渲染的 canvas 对象。在 web worker 环境也可工作。
使用
同样的也支持 npm 和 cdn 两种引入方式。
npm 加载
# 安装依赖 npm install browser-image-compression // 项目中引入使用 import imageCompression from 'browser-image-compression' cdn 加载
<!-- html head 中引入 --> <script src="https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.min.js"></script> <!-- 项目中直接使用 imageCompression 即可 --> 简单使用方式如下
imageCompression(file, { // 设置压缩后的最大大小，单位是 MB（会根据目标自动调整图片质量或者尺寸） maxSizeMB: 1, // 如果希望通过百分比控制质量，只需简单计算一下即可 // maxSizeMB: Math.round(file.size / (1024 * 1024) * quality), // 也可设置压缩后最大的宽或者高 （自动应用于图片中较长的那一边） // maxWidthOrHeight: 1920, }).then((result) => { // result 为压缩后的结果 }) 可以看出来使用非常简单:
- 调整尺寸就使用
maxWidthOrHeight; - 保持原尺寸就调整
maxSizeMB的值。
简单封装
function compressImageByImageCompression(file, options = {}) { const { width, height, quality = 0.8, ...ops } = options return window.imageCompression(file, { maxSizeMB: Math.round(file.size / (1024 * 1024) * quality), maxWidthOrHeight: width || height || undefined, libURL: 'https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.js', ...ops }) } 这样调用起来更加方便灵活。
注意事项
默认是开启的多线程压缩，会从 https://cdn.jsdelivr.net 拉取 worker 脚本。
如果存在网络原因访问不通畅，可以通过 options.libURL 替换为自定义的脚本位置，比如使用 Staticfile CDN 资源。
imageCompression(file, { // ...省略其它配置 libURL: 'https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.js' }) canvas api
主流的 JPG 纯前端压缩方案，基本都是借助 canvas 实现的，区别就在于边界场景是否考虑周全，配套的特性能否满足将使用的场景。
使用
先创建 Image 对象，获取图片的基本信息
下面是使用 URL.createObjectURL 创建资源链接的方式：
const img = new Image() // 图片完成加载 img.onload = () => { // 获取图片宽高 const { width, height } = img // 后续就可以使用 canvas 进行进一步的压缩处理 } img.src = URL.createObjectURL(file) 当然这里也可以用 FileReader，此时代码看上去多2行（hhh）
const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (event) { img.src = event.target.result } 紧接着就可以使用 canvas 进行图像的绘制（img 完成加载后）
// 创建 canvas 元素 const canvas = document.createElement('canvas') // 获取画布的2D渲染上下文 const ctx = canvas.getContext('2d') // 设置 canvas 的宽高与图片一致 canvas.width = img.width canvas.height = img.height // 在 canvas 上绘制图片（待绘制的图片，画布上的起始坐标，绘制的宽高） ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 如果把元素插入到页面中，则可以看到 canvas 绘制的图片 // document.body.appendChild(canvas); 接下来最核心的就行调用 canvas.toDataURL(type, quality) 进行"压缩"了。
// 只需要设置图片格式，与图片质量 两个参数即可 const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8) 接下来就需要将 compressedDataUrl 转化为 blob 或者 file 对象。
DataUrl 格式如下。
data:image/jpeg;base64,XXXX # 数据标识符：以"data:"开头 # MIME类型描述：指示数据的类型，"image/jpeg"表示JPEG图像 # 数据编码：以base64编码表示，"XXXX"是 base64 编码数据部分 咱们先把mimetype,decodedData 这 2 部分提取出来
const [dataDescription, base64Data] = compressedDataUrl.split(',') // 文件类型 const mimetype = dataDescription.match(/:(.*?);/)[1] // 解码 base64 数据 const decodedData = atob(base64Data) 最后将解码的 base64 数据转成 file 即可。
let n = decodedData.length // 创建等字节大小的 Uint8Array const u8arr = new Uint8Array(n) // 遍历赋值 while (n--) { u8arr[n] = decodedData.charCodeAt(n) } // 通过 Uint8Array 创建 File 对象 const result = new File([u8arr], file.name, { type: mimetype }) 简单封装
完整代码如下：
async function compressImageByCanvas(file, options = {}) { const { quality } = options let { width, height } = options let _resolve, _reject const promise = new Promise((resolve, reject) => { _resolve = resolve _reject = reject }) const img = new Image() img.onload = function () { // 如果只指定了宽度或高度，则另一个按比例缩放 if (width && !height) { height = Math.round(img.height * (width / img.width)) } else if (!width && height) { width = Math.round(img.width * (height / img.height)) } const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = width || img.width canvas.height = height || img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) const compressedDataUrl = canvas.toDataURL('image/jpeg', quality) _resolve(dataURItoFile(compressedDataUrl, file.name)) } img.src = createObjectURL(file) return promise } function dataURItoFile(dataURI, fileName) { const [dataDescription, base64Data] = dataURI.split(',') const mimetype = dataDescription.match(/:(.*?);/)[1] const decodedData = atob(base64Data) let n = decodedData.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = decodedData.charCodeAt(n) } return new File([u8arr], fileName, { type: mimetype }) } 兼容性问题
笔者并没有深入测试 canvas 压缩的兼容性问题，但从社区的几个前端处理 JPG 库里的 README 描述与 issues 等可以归纳出使用 canvas 处理时，需考虑下面几个方面的问题：
- 大小限制：详见 不同浏览器和设备上 canvas 大小限制；
- 信息保留：
EXIF信息，正确识别与处理图片方向； - 设备兼容性：移动端设备浏览器定制内核相对多, 边界情况较多（相关 API 的支持程度，canvas 差异性表现）。
参考：browser-image-compression, Compressor.js, localResizeIMG
完整 demo
笔者将本节内容整理成了一个 Demo，可以直接在线体验。
在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/
大概界面如下（可修改配置切换压缩方案，对比效果）：
纯血 HTML/CSS/JS，复制粘贴就能运行。
完整源码见：GitHub:ATQQ/demos - jpg-compress
最后
后续将继续学习&探索一下 GIF，MP4 转 GIF 等常用的动图前端处理实现的方式。
