图像压缩：减轻文件尺寸，畅通网络交互

2024-01-25 17:58:59

利用 Canvas 有效进行图像压缩

在数字世界中，图像的使用无处不在，它们是沟通的重要工具。但随着图像分辨率和复杂性的不断提升，图像文件的大小也随之暴增，给网络传输、存储和在线交互带来了一系列挑战。图像压缩技术由此应运而生，它可以优化网络体验、降低存储成本并提高网页加载速度。

Canvas 图像压缩的原理

Canvas 是 HTML5 中用于绘制图形的元素，它本质上是一个位图，可以将图像数据存储在像素阵列中。Canvas 图像压缩正是利用了位图的特性，通过减少像素数量或调整像素颜色深度来减小图像文件的大小。

像素数量减少

这是最直接的图像压缩方法，它通过降低图像的分辨率来减小文件大小。然而，这种方法也会降低图像质量，尤其是当压缩比过大的时候。

像素颜色深度调整

像素颜色深度是指每个像素可以存储的颜色数量。常见的颜色深度有 1 位、8 位、16 位和 24 位，颜色深度越低，每个像素可以存储的颜色数量就越少，图像文件的大小也就越小。但是，颜色深度越低，图像的色彩也会越单调。

有损压缩与无损压缩

图像压缩算法通常分为有损压缩和无损压缩。有损压缩通过丢弃一些图像数据来减小文件大小，这种压缩方式会降低图像质量，但压缩比更高。无损压缩则不会丢失任何图像数据，图像质量可以完全保持，但压缩比通常较低。

使用 Canvas 进行图像压缩

利用 Canvas 进行图像压缩的步骤如下：

1. 创建 Canvas 元素

<canvas id="canvas" width="600" height="400"></canvas>

2. 获取图片文件

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const imageData = reader.result;
    drawImage(imageData);
  };

  reader.readAsDataURL(file);
});

3. 绘制图片到 Canvas

function drawImage(imageData) {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  const image = new Image();
  image.src = imageData;

  image.onload = () => {
    context.drawImage(image, 0, 0);
  };
}

4. 压缩 Canvas 图像

function compressImage() {
  const canvas = document.getElementById('canvas');
  const quality = 0.9; // 压缩质量，范围为 0-1

  const dataURL = canvas.toDataURL('image/jpeg', quality);
  const blob = dataURLtoBlob(dataURL);

  // 这里可以将 blob 上传到服务器
}

5. 将 Canvas 图像转换成 Blob

function dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}