乐趣区

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

jiezi

前言

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

插播一下，本文案例已整顿成插件，已上传 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，转载请先分割受权

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

退出移动版