js图片压缩的原理

JavaScript 图片压缩的原理主要基于以下几个方面：

一、基本概念

图片格式：
- 常见的图片格式如 JPEG、PNG、GIF 等，每种格式有其自身的压缩算法和特点。

压缩方式：
- 有损压缩：通过去除图像中一些人眼不太敏感的信息来减小文件大小，例如 JPEG 格式。
- 无损压缩：在不丢失图像质量的前提下减小文件大小，例如 PNG 格式。

二、优势

减少存储空间需求。
加快图片加载速度，提升用户体验。
便于图片的传输和分享。

三、类型

前端压缩：在客户端使用 JavaScript 进行压缩。
后端压缩：在服务器端通过相关服务或库进行压缩。

四、应用场景

网站图片优化，提高页面加载性能。
移动应用中减少图片资源占用。
图片上传前处理，节省服务器存储空间。

五、压缩原理

色彩空间转换：
- 将图像从 RGB 色彩空间转换到 YCbCr 色彩空间，因为人眼对亮度（Y）更敏感，对色度（Cb、Cr）不太敏感，可以对色度进行下采样。

离散余弦变换（DCT）：
- 将图像从空间域转换到频率域，高频信息通常不那么重要，可以进行量化和舍弃。
量化：
- 对 DCT 系数进行量化，设置一个阈值，小于阈值的系数设为 0。
熵编码：
- 如 Huffman 编码，对量化后的系数进行编码，进一步减小文件大小。

六、示例代码（前端使用 canvas 进行简单压缩）

function compressImage(file, maxWidth = 800, quality = 0.7) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
      const img = new Image();
      img.src = event.target.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

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

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

        canvas.toBlob((blob) => {
          resolve(blob);
        }, 'image/jpeg', quality);
      };
      img.onerror = reject;
    };
    reader.onerror = reject;
  });
}

七、常见问题及解决方法