JavaScript 压缩 Base64 图像

在 Web 开发中，经常需要使用图像来美化页面或者展示产品。而在网络传输过程中，大尺寸的图像会导致传输速度减慢，因此需要对图像进行压缩以提高传输效率。本文将介绍如何使用 JavaScript 压缩 Base64 图像，以减小图片文件的大小。

Base64 编码

Base64 是一种用于网络传输的编码方式，它可以将二进制数据转换成字符串。Base64 编码过程包括三个步骤：

1. 将原始数据按字节分割成 6 位的小块；
2. 在每个小块前面添加两个 0，使之成为 8 位；
3. 将 8 位的块转换成一个 Base64 字符，共有 64 个字符可以使用。

使用 JavaScript 进行 Base64 编码的代码如下所示：

function encodeBase64(str) {
  var base64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
  var out = '';
  var triplet, val, i;

  for (i = 0; i < str.length; i += 3) {
    triplet = (str.charCodeAt(i) << 16) | (str.charCodeAt(i + 1) << 8) | str.charCodeAt(i + 2);
    val = [
      (triplet >> 18) & 0x3f,
      (triplet >> 12) & 0x3f,
      (triplet >> 6) & 0x3f,
      triplet & 0x3f
    ];
    out += base64.charAt(val[0]) + base64.charAt(val[1]) + base64.charAt(val[2]) + base64.charAt(val[3]);
  }

  if (str.length % 3 === 1) {
    triplet = str.charCodeAt(i) << 16;
    val = [
      (triplet >> 18) & 0x3f,
      (triplet >> 12) & 0x3f
    ];
    out += base64.charAt(val[0]) + base64.charAt(val[1]) + '==';
  }

  if (str.length % 3 === 2) {
    triplet = (str.charCodeAt(i) << 16) | (str.charCodeAt(i + 1) << 8);
    val = [
      (triplet >> 18) & 0x3f,
      (triplet >> 12) & 0x3f,
      (triplet >> 6) & 0x3f
    ];
    out += base64.charAt(val[0]) + base64.charAt(val[1]) + base64.charAt(val[2]) + '=';
  }

  return out;
};

图像压缩

对于图像，我们可以使用 HTML5 中的 canvas 元素来进行压缩。 canvas 元素可以用来绘制图形，包括图像。我们可以将原始的图像绘制到一个 canvas 上，然后将 canvas 中的内容转换成 Base64 字符串。这一过程中，我们可以通过调整 canvas 的宽度和高度来缩小图片的尺寸，从而达到图像压缩的效果。

以下是一个图像压缩的实例：

// 获取图片的 Base64 编码
function getImageData(url, callback) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    var imageData = canvas.toDataURL('image/png');
    callback(imageData);
  };
  img.src = url;
}

// 压缩 Base64 编码
function compressImageData(imageData, options) {
  var quality = options.quality || 0.8; // 压缩质量，可选，默认值为 0.8
  var maxWidth = options.maxWidth || 800; // 最大宽度，可选，默认值为 800
  var maxHeight = options.maxHeight || 600; // 最大高度，可选，默认值为 600
  var mimeType = imageData.split(';')[0].split(':')[1]; // MIME 类型

  var img = new Image();
  img.src = imageData;
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var width = img.width;
    var height = img.height;

    if (width > maxWidth) {
      height *= maxWidth / width;
      width = maxWidth;
    }

    if (height > maxHeight) {
      width *= maxHeight / height;
      height = maxHeight;
    }

    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);

    var compressedImageData = canvas.toDataURL(mimeType, quality);
    callback(compressedImageData);
  };
}

使用示例

var url = 'https://example.com/image.png';

// 获取图片的 Base64 编码
getImageData(url, function(imageData) {
  // 压缩图片
  compressImageData(imageData, {
    quality: 0.6,
    maxWidth: 600,
    maxHeight: 400
  }, function(compressedImageData) {
    console.log(compressedImageData);
  });
});

以上代码会打印出压缩后的图像文件的 Base64 编码字符串。

这是一个比较简单的压缩方法，如果您需要更高质量的压缩或者更高级的图片处理，请参考相关的库或者工具。

参考资料

• Base64
• HTML5 Canvas
• JavaScript Image Compressor