关于javascript:了解JS压缩图片这一篇就够了

前言

公司的挪动端业务须要在用户上传图片是由前端压缩图片大小，再上传到服务器，这样能够缩小挪动端上行流量，缩小用户上传期待时长，优化用户体验。

插播一下，本文案例已整顿成插件，已上传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）对象。个别的，它们有如下转化关系：

具体实现

上面将依照转化关系图中的转化办法一一实现。

file2DataUrl(file, callback)

用户通过页面标签 <input type="file" /> 上传的本地图片间接转化date URL字符串模式。能够应用FileReader 文件读取构造函数。FileReader 对象容许 Web 应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，应用File或Blob 对象指定要读取的文件或数据。该实例办法 readAsDataURL 读取文件内容并转化成 base64 字符串。在读取完后，在实例属性 result 上可获取文件内容。

function file2DataUrl(file, callback) { var reader = new FileReader();  reader.onload = function () {    callback(reader.result);  };  reader.readAsDataURL(file);}

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

data:<mediatype>,<data>

比方一张 png 格局图片，转化为 base64 字符串模式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。

file2Image(file, callback)

若想将用户通过本地上传的图片放入缓存并 img 标签显示进去，除了能够利用以上办法转化成的 base64 字符串作为图片 src，还能够间接用 URL 对象，援用保留在 File 和 Blob 中数据的 URL。应用对象 URL 的益处是能够不用把文件内容读取到 JavaScript 中而间接应用文件内容。为此，只有在须要文件内容的中央提供对象 URL 即可。

function file2Image(file, callback) { var image = new Image(); var URL = window.webkitURL || window.URL; if (URL) { var url = URL.createObjectURL(file);    image.onload = function() {      callback(image);      URL.revokeObjectURL(url);    };    image.src = url;  } else {    inputFile2DataUrl(file, function(dataUrl) {      image.onload = function() {        callback(image);      }      image.src = dataUrl;    });  }}

留神：要创建对象 URL，能够应用 window.URL.createObjectURL() 办法，并传入 File 或 Blob 对象。如果不再须要相应数据，最好开释它占用的内容。但只有有代码在援用对象 URL，内存就不会开释。要手工开释内存，能够把对象 URL 传给 URL.revokeObjectURL()。

url2Image(url, callback)

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

function url2Image(url, callback) { var image = new Image();  image.src = url;  image.onload = function() {    callback(image);  }}

image2Canvas(image)

利用drawlmage() 办法将 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 上绘制的高度；

function image2Canvas(image) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d');  canvas.width = image.naturalWidth;  canvas.height = image.naturalHeight;  ctx.drawImage(image, 0, 0, canvas.width, canvas.height); return canvas;}

canvas2DataUrl(canvas, quality, type)

HTMLCanvasElement 对象有 toDataURL(type, encoderOptions) 办法，返回一个蕴含图片展现的data URL 。同时能够指定输入格局和品质。

参数别离为：

type 图片格式，默认为 image/png。
encoderOptions 在指定图片格式为 image/jpeg 或 image/webp 的状况下，能够从 0 到 1 的区间内抉择图片的品质。如果超出取值范畴，将会应用默认值 0.92，其余参数会被疏忽。

function canvas2DataUrl(canvas, quality, type) { return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);}

dataUrl2Image(dataUrl, callback)

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

function dataUrl2Image(dataUrl, callback) { var image = new Image();  image.onload = function() {    callback(image);  };  image.src = dataUrl;}

dataUrl2Blob(dataUrl, type)

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

function dataUrl2Blob(dataUrl, type) { var data = dataUrl.split(',')[1]; var mimePattern = /^data:(.*?)(;base64)?,/; var mime = dataUrl.match(mimePattern)[1]; var binStr = atob(data); var arr = new Uint8Array(len); for (var i = 0; i < len; i++) {    arr[i] = binStr.charCodeAt(i);  } return new Blob([arr], {type: type || mime});}

canvas2Blob(canvas, callback, quality, type)

HTMLCanvasElement 有 toBlob(callback, [type], [encoderOptions]) 办法发明 Blob 对象，用以展现 canvas 上的图片；这个图片文件能够被缓存或保留到本地，由用户代理端自行决定。第二个参数指定图片格式，如不特地指明，图片的类型默认为 image/png，分辨率为 96dpi。第三个参数用于针对image/jpeg 格局的图片进行输入图片的品质设置。

function canvas2Blob(canvas, callback, quality, type){  canvas.toBlob(function(blob) {    callback(blob);  }, type || 'image/jpeg', quality || 0.8);}

为兼容低版本浏览器，作为 toBlob 的 polyfill 计划，能够用下面 data URL 生成 Blob 办法 dataUrl2Blob 作为HTMLCanvasElement 原型办法。

if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {  value: function (callback, type, quality) { let dataUrl = this.toDataURL(type, quality);    callback(dataUrl2Blob(dataUrl));  } });}

blob2DataUrl(blob, callback)

将 Blob 对象转化成 data URL 数据，因为 FileReader 的实例 readAsDataURL 办法不仅反对读取文件，还反对读取 Blob 对象数据，这里复用下面 file2DataUrl 办法即可：

function blob2DataUrl(blob, callback) {  file2DataUrl(blob, callback);}

blob2Image(blob, callback)

将 Blob 对象转化成 Image 对象，可通过 URL 对象援用文件，也反对援用 Blob 这样的类文件对象，同样，这里复用下面 file2Image 办法即可：

function blob2Image(blob, callback) {  file2Image(blob, callback);}

upload(url, file, callback)

上传图片（已压缩），能够应用 FormData 传入文件对象，通过 XHR 间接把文件上传到服务器。

function upload(url, file, callback) { var xhr = new XMLHttpRequest(); var fd = new FormData();  fd.append('file', file);  xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 上传胜利      callback && callback(xhr.responseText);    } else { throw new Error(xhr);    }  }  xhr.open('POST', url, true);  xhr.send(fd);}

也能够应用 FileReader 读取文件内容，转化成二进制上传

function upload(url, file) { var reader = new FileReader(); var xhr = new XMLHttpRequest();  xhr.open('POST', url, true);  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');  reader.onload = function() {    xhr.send(reader.result);  };  reader.readAsBinaryString(file);}

实现繁难图片压缩

在相熟以上各种图片转化办法的具体实现，将它们封装在一个专用对象 util 里，再联合压缩转化流程图，这里咱们能够简略实现图片压缩了：
首先将上传图片转化成 Image 对象，再将写入到 Canvas 画布，最初由 Canvas 对象 API 对图片的大小和尺寸输入调整，实现压缩目标。

/** * 繁难图片压缩办法 * @param {Object} options 相干参数 */(function (win) { var REGEXP_IMAGE_TYPE = /^image\//; var util = {}; var defaultOptions = {    file: null,    quality: 0.8  }; var isFunc = function (fn) { return typeof fn === 'function'; }; var isImageType = function (value) { return REGEXP_IMAGE_TYPE.test(value); }; /**   * 繁难图片压缩构造函数   * @param {Object} options 相干参数   */ function SimpleImageCompressor(options) {    options = Object.assign({}, defaultOptions, options); this.options = options; this.file = options.file; this.init();  } var _proto = SimpleImageCompressor.prototype;  win.SimpleImageCompressor = SimpleImageCompressor; /**   * 初始化   */  _proto.init = function init() { var _this = this; var file = this.file; var options = this.options; if (!file || !isImageType(file.type)) {      console.error('请上传图片文件!'); return;    } if (!isImageType(options.mimeType)) {      options.mimeType = file.type;    }    util.file2Image(file, function (img) { var canvas = util.image2Canvas(img);      file.width = img.naturalWidth;      file.height = img.naturalHeight;      _this.beforeCompress(file, canvas);      util.canvas2Blob(canvas, function (blob) {        blob.width = canvas.width;        blob.height = canvas.height;        options.success && options.success(blob);      }, options.quality, options.mimeType)    })  } /**   * 压缩之前，读取图片之后钩子函数   */  _proto.beforeCompress = function beforeCompress() { if (isFunc(this.options.beforeCompress)) { this.options.beforeCompress(this.file);    }  } // 省略 `util` 专用办法定义 // ... // 将 `util` 专用办法增加到实例的动态属性上 for (key in util) { if (util.hasOwnProperty(key)) {      SimpleImageCompressor[key] = util[key];    }  }})(window)

这个繁难图片压缩办法调用和入参：

var fileEle = document.getElementById('file');fileEle.addEventListener('change', function () {  file = this.files[0]; var options = {    file: file,    quality: 0.6,    mimeType: 'image/jpeg', // 压缩前回调    beforeCompress: function (result) {      console.log('压缩之前图片尺寸大小: ', result.size);      console.log('mime 类型: ', result.type); // 将上传图片在页面预览 // SimpleImageCompressor.file2DataUrl(result, function (url) { //   document.getElementById('origin').src = url; // })    }, // 压缩胜利回调    success: function (result) {      console.log('压缩之后图片尺寸大小: ', result.size);      console.log('mime 类型: ', result.type);      console.log('压缩率： ', (result.size / file.size * 100).toFixed(2) + '%'); // 生成压缩后图片在页面展现 // SimpleImageCompressor.file2DataUrl(result, function (url) { //   document.getElementById('output').src = url; // }) // 上传到近程服务器 // SimpleImageCompressor.upload('/upload.png', result);    }  }; new SimpleImageCompressor(options);}, false);

如果看到这里的客官不厌弃这个 demo 太简略能够戳这里试试水。如果你有足够的急躁多传几种类型图片就会发现还存在如下问题：

压缩输入图片寸尺固定为原始图片尺寸大小，而理论可能须要管制输入图片尺寸，同时达到尺寸也被压缩目标；
png 格局图片同格局压缩，压缩率不高，还有可能呈现“不减反增”景象；
有些状况，其余格局转化成 png 格局也会呈现“不减反增”景象；
大尺寸 png 格局图片在一些手机上，压缩后呈现“黑屏”景象；

改进版图片压缩

俗话说“罗马不是一天建成的”，通过上述试验，咱们发现了很多有余，上面将逐条问题剖析，寻求解决方案。

压缩输入图片寸尺固定为原始图片尺寸大小，而理论可能须要管制输入图片尺寸，同时达到尺寸也被压缩目标；

为了防止压缩图片变形，个别采纳等比缩放，首先要计算出原始图片宽高比 aspectRatio，用户设置的高乘以 aspectRatio，得出等比缩放后的宽，若比用户设置宽的小，则用户设置的高为为基准缩放，否则以宽为基准缩放。

var aspectRatio = naturalWidth / naturalHeight;var width = Math.max(options.width, 0) || naturalWidth;var height = Math.max(options.height, 0) || naturalHeight;if (height * aspectRatio > width) {  height = width / aspectRatio;} else {  width = height * aspectRatio;}

输入图片的尺寸确定了，接下来就是按这个尺寸创立一个 Canvas 画布，将图片画下来。这里能够将下面提到的 image2Canvas 办法略微做一下革新：

function image2Canvas(image, destWidth, destHeight) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d');  canvas.width = destWidth || image.naturalWidth;  canvas.height = destHeight || image.naturalHeight;  ctx.drawImage(image, 0, 0, canvas.width, canvas.height); return canvas;}

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` 格局图片大小超过 `convertSize`, 转化成 `jpeg` 格局if (file.size > options.convertSize && options.mimeType === 'image/png') {  options.mimeType = 'image/jpeg';}// 省略一些代码// ...// 用户期待的输入宽高没有大于源图片的宽高状况下，输入文件大小大于源文件，返回源文件if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {  result = file;}

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

因为各大浏览器对Canvas最大尺寸反对不同

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

这里能够通过管制输入图片最大宽高避免生成画布越界，并且用通明色笼罩默认彩色背景解决解决“黑屏”问题：

// ...// 限度最小和最大宽高var maxWidth = Math.max(options.maxWidth, 0) || Infinity;var maxHeight = Math.max(options.maxHeight, 0) || Infinity;var minWidth = Math.max(options.minWidth, 0) || 0;var minHeight = Math.max(options.minHeight, 0) || 0;if (maxWidth < Infinity && maxHeight < Infinity) { if (maxHeight * aspectRatio > maxWidth) {    maxHeight = maxWidth / aspectRatio;  } else {    maxWidth = maxHeight * aspectRatio;  }} else if (maxWidth < Infinity) {  maxHeight = maxWidth / aspectRatio;} else if (maxHeight < Infinity) {  maxWidth = maxHeight * aspectRatio;}if (minWidth > 0 && minHeight > 0) { if (minHeight * aspectRatio > minWidth) {    minHeight = minWidth / aspectRatio;  } else {    minWidth = minHeight * aspectRatio;  }} else if (minWidth > 0) {  minHeight = minWidth / aspectRatio;} else if (minHeight > 0) {  minWidth = minHeight * aspectRatio;}width = Math.floor(Math.min(Math.max(width, minWidth), maxWidth));height = Math.floor(Math.min(Math.max(height, minHeight), maxHeight));// ...// 笼罩默认填充色彩 (#000)var fillStyle = 'transparent';context.fillStyle = fillStyle;

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

总结

咱们梳理了通过页面标签 <input type="file" /> 上传本地图片到图片被压缩整个过程，也笼罩到了在理论应用中还存在的一些意外状况，提供了相应的解决方案。将改进版图片压缩整顿成插件，已上传npm ，可通过 npm install js-image-compressor -D 装置应用，能够从github 下载。整顿匆忙，如有问题欢送大家斧正，完～

本文作者：思否wuwhs，转载请先分割受权

点击关注，第一工夫理解华为云陈腐技术~