公司的移动端业务需要在用户上传图片是由前端压缩图片大小，再上传到服务器，这样可以减少移动端上行流量，减少用户上传等待时长，优化用户体验。

插播一下，本文案例已整理成插件，已上传 npm ，可通过 npm install js-image-compressor -D 安装使用，可以从 github 下载。

JavaScript 操作压缩图片原理不难，已有成熟 API，然而在实际输出压缩后结果却总有意外，有些图片竟会越压缩越大，加之终端（手机）类型众多，有些手机压缩图片甚至变黑。

压缩小龙女，哈哈哈

所以本文将试图解决如下问题：

弄清 Image 对象、data URL、Canvas 和 File（Blob）之间的转化关系；

图片压缩关键技巧；

超大图片压缩黑屏问题。

在实际应用中有可能使用的情境：大多时候我们直接读取用户上传的 File 对象，读写到画布（canvas）上，利用 Canvas 的 API 进行压缩，完成压缩之后再转成 File（Blob） 对象，上传到远程图片服务器；不妨有时候我们也需要将一个 base64 字符串压缩之后再变为 base64 字符串传入到远程数据库或者再转成 File（Blob） 对象。一般的，它们有如下转化关系：

js-image-compressor-flow-chat

下面将按照转化关系图中的转化方法一一实现。

file2DataUrl(file, callback)

用户通过页面标签 上传的本地图片直接转化 data URL 字符串形式。可以使用 FileReader 文件读取构造函数。FileReader 对象允许 Web 应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。该实例方法 readAsDataURL 读取文件内容并转化成 base64 字符串。在读取完后，在实例属性 result 上可获取文件内容。

Data URL 由四个部分组成：前缀（data:）、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身：

比如一张 png 格式图片，转化为 base64 字符串形式：

file2Image(file, callback)

若想将用户通过本地上传的图片放入缓存并 img 标签显示出来，除了可以利用以上方法转化成的 base64 字符串作为图片 src，还可以直接用 URL 对象，引用保存在 File 和 Blob 中数据的 URL。使用对象 URL 的好处是可以不必把文件内容读取到 JavaScript 中 而直接使用文件内容。为此，只要在需要文件内容的地方提供对象 URL 即可。

注意：要创建对象 URL，可以使用 window.URL.createObjectURL() 方法，并传入 File 或 Blob 对象。如果不再需要相应数据，最好释放它占用的内容。但只要有代码在引用对象 URL，内存就不会释放。要手工释放内存，可以把对象 URL 传给 URL.revokeObjectURL()。

url2Image(url, callback)

通过图片链接（url）获取图片 Image 对象，由于图片加载是异步的，因此放到回调函数 callback 回传获取到的 Image 对象。

image2Canvas(image)

利用 drawImage() 方法将 Image 对象绘画在 Canvas 对象上。

drawImage 有三种语法形式：

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数：

image 绘制到上下文的元素；

sx 绘制选择框左上角以 Image 为基准 X 轴坐标；

sy 绘制选择框左上角以 Image 为基准 Y 轴坐标；

sWidth 绘制选择框宽度；

sHeight 绘制选择框宽度；

dx Image 的左上角在目标 canvas 上 X 轴坐标；

dy Image 的左上角在目标 canvas 上 Y 轴坐标；

dWidth Image 在目标 canvas 上绘制的宽度；

dHeight Image 在目标 canvas 上绘制的高度；

canvas2DataUrl(canvas, quality, type)

HTMLCanvasElement 对象有 toDataURL(type, encoderOptions) 方法，返回一个包含图片展示的 data URL 。同时可以指定输出格式和质量。

参数分别为：

type 图片格式，默认为 image/png。

encoderOptions 在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。

dataUrl2Image(dataUrl, callback)

图片链接也可以是 base64 字符串，直接赋值给 Image 对象 src 即可。

dataUrl2Blob(dataUrl, type)

将 data URL 字符串转化为 Blob 对象。主要思路是：先将 data URL 数据（data） 部分提取出来，用 atob 对经过 base64 编码的字符串进行解码，再转化成 Unicode 编码，存储在Uint8Array（8位无符号整型数组，每个元素是一个字节） 类型数组，最终转化成 Blob 对象。

输出图片的尺寸确定了，接下来就是按这个尺寸创建一个 Canvas 画布，将图片画上去。这里可以将上面提到的 image2Canvas 方法稍微做一下改造：

png 格式图片同格式压缩，压缩率不高，还有可能出现“不减反增”现象

一般的，不建议将 png 格式图片压缩成自身格式，这样压缩率不理想，有时反而会造成自身质量变得更大。

因为我们在“具体实现”中两个有关压缩关键 API：

toBlob(callback, [type], [encoderOptions]) 参数 encoderOptions 用于针对image/jpeg 格式的图片进行输出图片的质量设置；

toDataURL(type, encoderOptions 参数encoderOptions 在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。

均未对 png 格式图片有压缩效果。

有个折衷的方案，我们可以设置一个阈值，如果 png 图片的质量小于这个值，就还是压缩输出 png 格式，这样最差的输出结果不至于质量太大，在此基础上，如果压缩后图片大小 “不减反增”，我们就兜底处理输出源图片给用户。当图片质量大于某个值时，我们压缩成 jpeg 格式。

大尺寸 png 格式图片在一些手机上，压缩后出现“黑屏”现象；

由于各大浏览器对 Canvas 最大尺寸支持不同

如果图片尺寸过大，在创建同尺寸画布，再画上图片，就会出现异常情况，即生成的画布没有图片像素，而画布本身默认给的背景色为黑色，这样就导致图片“黑屏”情况。

这里可以通过控制输出图片最大宽高防止生成画布越界，并且用透明色覆盖默认黑色背景解决解决“黑屏”问题：

到这里，上述的意外问题被我们一一解决了，如需体验改进版的图片压缩 demo 的小伙伴可以戳这里

我们梳理了通过页面标签 上传本地图片到图片被压缩整个过程，也覆盖到了在实际使用中还存在的一些意外情况，提供了相应的解决方案。将改进版图片压缩整理成插件，已上传 npm ，可通过 npm install js-image-compressor -D 安装使用，可以从 github 下载。整理匆忙，如有问题欢迎大家指正，完～

点击这里→了解更多精彩内容