图片压缩 js base64

基础概念：图片压缩是一种减少图像数据量的技术，以便更快地传输和存储。Base64 是一种编码格式，它可以将二进制数据转换为 ASCII 字符串，常用于在 HTML 或 JavaScript 中嵌入图像数据。

优势：

减少文件大小，加快加载速度。
便于在文本协议中传输。
可以直接嵌入到 HTML 或 CSS 中，无需额外的 HTTP 请求。

类型：

有损压缩：通过去除图像中的某些信息来减小文件大小，如 JPEG 格式。
无损压缩：保留所有原始数据，但通过算法优化存储方式，如 PNG 格式。

应用场景：

网页加载优化。
移动应用中节省存储空间。
数据传输中减少带宽占用。

遇到的问题及原因：在使用 JavaScript 进行 Base64 图片压缩时，可能会遇到以下问题：

性能问题：大量或大尺寸图片的压缩可能导致浏览器卡顿。
兼容性问题：不同浏览器对 Base64 编码的支持程度可能不同。
编码错误：错误的编码过程可能导致图片无法正确显示。

解决方案：

性能优化：
- 使用 Web Workers 进行后台压缩，避免阻塞主线程。
- 分块处理大图片，减少单次处理的负担。

兼容性处理：
- 在编码前检查浏览器支持情况，必要时提供降级方案。
- 使用 polyfill 或兼容库确保功能在不同环境中的一致性。
编码准确性：
- 确保使用正确的编码和解码函数。
- 在编码后进行验证，确保图片可以正常显示。

示例代码：以下是一个简单的 JavaScript 示例，展示如何将图片转换为 Base64 编码并进行压缩：

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      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 > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }

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

      canvas.toBlob((blob) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      }, 'image/jpeg', quality);
    };
    img.onerror = reject;
  });
}

// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  try {
    const compressedBase64 = await compressImage(file, 800, 600, 0.8);
    console.log(compressedBase64);
  } catch (error) {
    console.error('压缩失败:', error);
  }
});

这段代码首先创建一个 Image 对象来加载文件，然后在图片加载完成后，使用 canvas 进行尺寸调整和质量压缩，最后将压缩后的图片转换为 Base64 编码。