Canvas 实现浏览器图片压缩

在 Web 开发中，图片是网页的重要组成部分之一，但高分辨率的图片往往会增加页面加载时间，影响用户体验。因此，我们需要一种方法来压缩图片，从而减小文件大小，加快页面加载速度。使用 HTML5 的 Canvas API，我们可以轻松地实现这一功能。本文将详细介绍如何使用 Canvas API 在客户端进行图片压缩，并给出多个示例来演示不同的压缩场景和技术细节。

基本概念与作用说明

Canvas API 提供了一个灵活的绘图环境，可以通过 JavaScript 来控制像素级的绘制。我们可以通过将图片绘制到 Canvas 上，然后重新导出为不同大小和质量的图片，从而实现图片压缩的目的。这种压缩方法不仅可以在客户端完成，减轻服务器的压力，还能让用户即时看到压缩效果。

压缩的基本原理

• 缩小图片尺寸：通过调整 Canvas 的尺寸来缩小图片的宽度和高度。
• 降低图片质量：通过调整导出图片的质量参数来降低图片的清晰度。

示例一：基础图片压缩

首先，我们来看一个简单的示例，该示例演示了如何使用 Canvas 将图片缩小并导出为 JPEG 格式。

function compressImage(file, maxWidth, quality) {
   
  return new Promise((resolve, reject) => {
   
    const img = new Image();
    const reader = new FileReader();

    reader.onload = (event) => {
   
      img.src = event.target.result;

      img.onload = () => {
   
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 调整 Canvas 大小
        canvas.width = img.width > maxWidth ? maxWidth : img.width;
        canvas.height = img.height * (canvas.width / img.width);

        // 绘制图片到 Canvas
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // 导出为 JPEG 图片
        const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
        resolve(compressedDataUrl);
      };

      img.onerror = () => reject(new Error('Failed to load image.'));
    };

    reader.onerror = () => reject(new Error('Failed to read file.'));

    // 读取文件内容
    reader.readAsDataURL(file);
  });
}

使用示例

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (event) => {
   
  const file = event.target.files[0];
  try {
   
    const compressedDataUrl = await compressImage(file, 800, 0.8);
    // 显示压缩后的图片
    co