释放图片存储空间，JS压缩图片就这么简单

前端

2023-10-23 02:05:46

图片压缩的意义

图片作为数字世界的重要组成部分，广泛应用于网站、移动端应用、社交媒体等领域。然而，过大的图片尺寸不仅会拖慢页面加载速度，还会占用大量存储空间，影响用户体验和网站性能。为了解决这些问题，图片压缩技术应运而生。

JavaScript图片压缩方法

1. 使用Canvas进行压缩

Canvas是HTML5中用于绘制图形的元素，它提供了多种方法来操作图像数据。我们可以利用Canvas的drawImage()方法来压缩图片，具体步骤如下：

创建一个新的Canvas元素，并设置其宽度和高度与原图相同。
使用drawImage()方法将原图绘制到新的Canvas上。
使用Canvas的toDataURL()方法将新的Canvas导出为DataURL。
将DataURL转换为Blob对象，以便将其保存为文件。

2. 利用文件读取器进行压缩

文件读取器（FileReader）对象允许我们读取文件的内容，包括图片文件。我们可以利用文件读取器来压缩图片，具体步骤如下：

创建一个新的文件读取器对象。
使用FileReader对象的readAsDataURL()方法将图片文件读取为DataURL。
将DataURL转换为Blob对象，以便将其保存为文件。

3. 采用第三方库进行压缩

除了上述两种方法外，我们还可以使用第三方库来压缩图片。目前，有很多优秀的JavaScript图片压缩库可供选择，例如：

Image Compressor
Compressor.js
TinyPNG
Jpegoptim
OptiPNG

这些库通常提供了更高级的压缩算法，可以实现更高的压缩率。

JS图片压缩实例

下面是一个使用JavaScript压缩图片的简单示例：

// 创建一个新的Canvas元素
const canvas = document.createElement('canvas');

// 设置Canvas的宽度和高度
canvas.width = 100;
canvas.height = 100;

// 创建一个新的图片对象
const image = new Image();

// 将图片加载到Canvas上
image.onload = function() {
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);

  // 将Canvas导出为DataURL
  const dataURL = canvas.toDataURL();

  // 将DataURL转换为Blob对象
  const blob = dataURItoBlob(dataURL);

  // 将Blob对象保存为文件
  saveAs(blob, 'compressed-image.jpg');
};

// 将DataURL转换为Blob对象
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const intArray = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i);
  }
  return new Blob([intArray], { type: mimeString });
}