使用Canvas API实现前端图片压缩记录

前言

最近我在工作上遇到用户上传大尺寸图片的需求，发现直接上传原始图片会消耗过多带宽和存储空间。于是在网上找了一些像图片压缩网站这样的工具能在浏览器里直接完成压缩，无需上传到服务器，这让我很受启发。经过研究，我找到了使用Canvas API的简单实现方案，下面是自己实现的代码和想法。

核心实现原理

Canvas图片压缩主要利用以下技术流程：

将原始图片绘制到Canvas画布上
调整Canvas尺寸以实现分辨率压缩
使用有损编码(如JPEG)和可调质量参数输出图片
将结果转换为Blob或Base64格式

关键代码实现

1. 图片加载与绘制

javascript 复制代码

function loadImage(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    
    img.onload = () => {
      URL.revokeObjectURL(url);
      resolve(img);
    };
    
    img.onerror = (e) => {
      reject(e);
    };
    
    img.src = url;
  });
}

2. 核心压缩函数

javascript 复制代码

async function compressImage(file, options = {}) {
  const { 
    quality = 0.8, 
    maxWidth = 800, 
    maxHeight = 800,
    mimeType = 'image/jpeg'
  } = options;
  
  // 加载原始图片
  const img = await loadImage(file);
  
  // 计算缩放比例
  const [newWidth, newHeight] = calculateSize(img, maxWidth, maxHeight);
  
  // 创建canvas并绘制
  const canvas = document.createElement('canvas');
  canvas.width = newWidth;
  canvas.height = newHeight;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, newWidth, newHeight);
  
  // 转换为Blob对象
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob),
      mimeType,
      quality
    );
  });
}

// 辅助函数：计算新尺寸
function calculateSize(img, maxWidth, maxHeight) {
  let width = img.width;
  let height = img.height;
  
  // 计算缩放比例
  if (width > height) {
    if (width > maxWidth) {
      height = Math.round((height * maxWidth) / width);
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width = Math.round((width * maxHeight) / height);
      height = maxHeight;
    }
  }
  
  return [width, height];
}

3. 使用示例

javascript 复制代码

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

fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  try {
    const compressedBlob = await compressImage(file, {
      quality: 0.7,
      maxWidth: 1024,
      maxHeight: 1024
    });
    
    // 使用压缩后的Blob
    console.log(`原始大小: ${file.size} bytes`);
    console.log(`压缩后: ${compressedBlob.size} bytes`);
    
    // 可以上传到服务器或提供给用户下载
  } catch (error) {
    console.error('压缩失败:', error);
  }
});

关键参数说明

quality (0-1) : 控制JPEG压缩质量，数值越小压缩率越高
maxWidth/maxHeight: 限制图片最大尺寸，实现分辨率压缩
mimeType: 可指定为'image/jpeg'(有损)、'image/png'(无损)等

浏览器兼容性

Canvas压缩功能在现代浏览器中支持良好，包括：

Chrome 50+
Firefox 50+
Safari 10+
Edge 15+