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

5次阅读

共计 10756 个字符，预计需要花费 27 分钟才能阅读完成。

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

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

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

用户通过页面标签 <input type="file" /> 上传的本地图片间接转化 data 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。

若想将用户通过本地上传的图片放入缓存并 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);
      window.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 传给 window.revokeObjectURL()。

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

function url2Image(url, callback) {var image = new Image();
  image.src = url;
  image.onload = function() {callback(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 上绘制的高度；

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;
}

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);
}

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

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

将 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});
}

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));
  }
 });
}

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

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

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

function blob2Image(blob, callback) {file2Image(blob, 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 最大尺寸反对不同

浏览器	最大宽高	最大面积
Chrome	32,767 pixels	268,435,456 pixels(e.g.16,384 x 16,384)
Firefox	32,767 pixels	472,907,776 pixels(e.g.22,528 x 20,992)
IE	8,192 pixels	N/A
IE Mobile	4,096 pixels	N/A

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

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

// ...
// 限度最小和最大宽高
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 下载。整顿匆忙，如有问题欢送大家斧正，完～

正文完

javascript

发表至： javascript

2020-08-04

0

关于javascript:每个程序员都该学习的5种编程开发语言

关于javascript:企业信息查询插件

手撸-Promise

关于javascript:objectassgin导致的vue双向数据绑失效

关于javascript:js-自定义事件

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

前言

转化关系

具体实现

file2DataUrl(file, callback)

file2Image(file, callback)

url2Image(url, callback)

image2Canvas(image)

canvas2DataUrl(canvas, quality, type)

dataUrl2Image(dataUrl, callback)

dataUrl2Blob(dataUrl, type)

canvas2Blob(canvas, callback, quality, type)

blob2DataUrl(blob, callback)

blob2Image(blob, callback)

upload(url, file, callback)

实现繁难图片压缩

改进版图片压缩

总结

站内搜索