JS 图片压缩原理与实现方法详解

原理介绍

图片压缩是指在保证图片质量的前提下，通过降低图片的分辨率、压缩比率等方式来减小图片的体积，从而达到优化页面加载速度的目的。在网页中，对于图片的大小不同，会直接影响页面的加载速度，特别是对于移动端的用户体验更加重要。

在实现 JavaScript 图片压缩的时候，常见的有两种方式：

• HTML5 的 Canvas + toDataURL 方法；

• JavaScript 的 atob 和 btoa 方法。

其中，在使用 Canvas + toDataURL 方法时，通过将图片加载到 Canvas 画布上面，再将 Canvas 转为 base64 编码的字符串，并通过“压缩比”设置实现图片压缩。

而在使用 atob 和 btoa 方法时，通过利用浏览器提供的 atob 和 btoa 方法，将原图片数据转换成二进制数据，并通过设置“压缩比”实现游览器端图片压缩。

实现步骤

方式一：Canvas + toDataURL

1. 加载图片到 Canvas 画布中

var img = new Image();
img.src = 'original.jpg';
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
}

2. Canvas 转为 base64 编码的字符串

var quality = 0.6; // 压缩比例
var dataURL = canvas.toDataURL('image/jpeg', quality); // 转为 JPEG 格式

方式二：atob 和 btoa

1. 将图片读取为二进制数据

// 读取图片的原始数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'original.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var dataUrl = e.target.result;
      // dataUrl 经过 btoa 后压缩比变化
      var compressedDataURL = _compressImg(dataUrl, 0.6);
    }
    reader.readAsDataURL(xhr.response);
  }
};
xhr.send();

2. 将二进制数据转为 base64 编码的字符串

function _compressImg(dataUrl, quality) {
  var img = new Image();
  img.src = dataUrl;
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var imageData = canvas.toDataURL('image/jpeg', quality);
  return imageData;
}

示例说明

示例一

假设我们有一张 2000 x 2000 像素的图片，使用方式一压缩图片，并设置压缩比为 0.6，代码如下：

var img = new Image();
img.src = 'original.jpg';
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var quality = 0.6; // 压缩比例
  var dataURL = canvas.toDataURL('image/jpeg', quality); // 转为 JPEG 格式

  console.log('原始图片大小：', img.src.length);
  console.log('压缩后图片大小：', dataURL.length);
};

输出结果为：

原始图片大小： 1588163
压缩后图片大小： 275235

可以看到使用该方法可以达到将图片体积减小到原始大小的 17% 左右。

示例二

假设我们有一张 4000 x 4000 像素的图片，使用方式二压缩图片，并设置压缩比为 0.4，代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'original.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var dataUrl = e.target.result;
      // dataUrl 经过 btoa 后压缩比变化
      var compressedDataURL = _compressImg(dataUrl, 0.4);

      console.log('原始图片大小：', dataUrl.length);
      console.log('压缩后图片大小：', compressedDataURL.length);
    }
    reader.readAsDataURL(xhr.response);
  }
};
xhr.send();

function _compressImg(dataUrl, quality) {
  var img = new Image();
  img.src = dataUrl;
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var imageData = canvas.toDataURL('image/jpeg', quality);
  return imageData;
}

输出结果为：

原始图片大小： 4699401
压缩后图片大小： 881580

可以看到使用该方法可以达到将图片体积减小到原始大小的 19% 左右。