开发问题总结

Appearance

前端图片压缩方法 ​

核心功能 ​

  • 基于HTML5 Canvas的图片压缩处理
  • 支持等比例缩放压缩
  • 提供高度和宽度限制功能
  • 实现文件大小限制功能
  • 提供质量参数调节选项
  • 支持常见图片格式输入和输出
  • 返回压缩后的图片数据
  • 包含错误处理机制
  • 考虑性能优化
  • 支持批量图片压缩处理
  • 提供压缩进度反馈机制

实现代码 ​

javascript
/**
 * 图片压缩工具类
 */
class ImageCompressor {
  /**
   * 压缩单个图片
   * @param {File|Blob|string} image - 图片源（File对象、Blob对象或base64字符串）
   * @param {Object} options - 压缩选项
   * @param {number} [options.maxWidth=1920] - 最大宽度限制
   * @param {number} [options.maxHeight=1080] - 最大高度限制
   * @param {number} [options.maxSize=200 * 1024] - 最大文件大小限制（字节）
   * @param {number} [options.quality=0.8] - 图片质量（0-1）
   * @param {string} [options.outputType='image/jpeg'] - 输出格式
   * @param {Function} [options.onProgress] - 进度回调函数
   * @returns {Promise<Blob>} - 压缩后的Blob对象
   */
  static async compressImage(image, options = {}) {
    const {
      maxWidth = 1920,
      maxHeight = 1080,
      maxSize = 200 * 1024,
      quality = 0.8,
      outputType = 'image/jpeg',
      onProgress
    } = options;

    try {
      // 加载图片
      const img = await this.loadImage(image);
      
      // 计算缩放比例
      const { width, height } = this.calculateDimensions(img.width, img.height, maxWidth, maxHeight);
      
      // 绘制到Canvas
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      
      // 尝试不同质量以达到大小限制
      let currentQuality = quality;
      let compressedBlob;
      
      while (currentQuality >= 0.1) {
        // 转换为Blob
        compressedBlob = await this.canvasToBlob(canvas, outputType, currentQuality);
        
        // 检查大小
        if (compressedBlob.size <= maxSize) {
          onProgress && onProgress(100);
          return compressedBlob;
        }
        
        // 降低质量
        currentQuality -= 0.1;
        onProgress && onProgress(Math.round((1 - currentQuality) * 70));
      }
      
      // 如果最低质量仍超过大小限制，再次缩小尺寸
      if (compressedBlob.size > maxSize) {
        const scaleFactor = Math.sqrt(maxSize / compressedBlob.size);
        const newWidth = Math.floor(width * scaleFactor);
        const newHeight = Math.floor(height * scaleFactor);
        
        canvas.width = newWidth;
        canvas.height = newHeight;
        ctx.drawImage(img, 0, 0, newWidth, newHeight);
        
        compressedBlob = await this.canvasToBlob(canvas, outputType, 0.1);
        onProgress && onProgress(100);
      }
      
      return compressedBlob;
    } catch (error) {
      console.error('压缩图片失败:', error);
      throw new Error(`压缩图片失败: ${error.message}`);
    }
  }

  /**
   * 批量压缩图片
   * @param {Array<File|Blob|string>} images - 图片源数组
   * @param {Object} options - 压缩选项
   * @param {Function} [options.onBatchProgress] - 批量进度回调函数
   * @returns {Promise<Array<Blob>>} - 压缩后的Blob对象数组
   */
  static async compressImages(images, options = {}) {
    const {
      onBatchProgress,
      ...compressOptions
    } = options;

    const results = [];
    const total = images.length;

    for (let i = 0; i < total; i++) {
      try {
        const compressedBlob = await this.compressImage(images[i], {
          ...compressOptions,
          onProgress: (progress) => {
            const batchProgress = (i / total) * 100 + (progress / total);
            onBatchProgress && onBatchProgress(Math.round(batchProgress), i, total);
          }
        });
        results.push(compressedBlob);
      } catch (error) {
        console.error(`压缩第${i + 1}张图片失败:`, error);
        results.push(null); // 失败时添加null
      }
    }

    return results;
  }

  /**
   * 加载图片
   * @param {File|Blob|string} image - 图片源
   * @returns {Promise<HTMLImageElement>} - 加载完成的图片元素
   */
  static loadImage(image) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error('图片加载失败'));
      
      if (typeof image === 'string') {
        // Base64字符串
        img.src = image;
      } else {
        // File或Blob对象
        const reader = new FileReader();
        reader.onload = (e) => {
          img.src = e.target.result;
        };
        reader.onerror = () => reject(new Error('读取文件失败'));
        reader.readAsDataURL(image);
      }
    });
  }

  /**
   * 计算压缩后的尺寸
   * @param {number} width - 原始宽度
   * @param {number} height - 原始高度
   * @param {number} maxWidth - 最大宽度
   * @param {number} maxHeight - 最大高度
   * @returns {Object} - 计算后的宽度和高度
   */
  static calculateDimensions(width, height, maxWidth, maxHeight) {
    if (width <= maxWidth && height <= maxHeight) {
      return { width, height };
    }

    const widthRatio = maxWidth / width;
    const heightRatio = maxHeight / height;
    const ratio = Math.min(widthRatio, heightRatio);

    return {
      width: Math.floor(width * ratio),
      height: Math.floor(height * ratio)
    };
  }

  /**
   * 将Canvas转换为Blob
   * @param {HTMLCanvasElement} canvas - Canvas元素
   * @param {string} type - 输出格式
   * @param {number} quality - 图片质量
   * @returns {Promise<Blob>} - 转换后的Blob对象
   */
  static canvasToBlob(canvas, type, quality) {
    return new Promise((resolve) => {
      canvas.toBlob(resolve, type, quality);
    });
  }

  /**
   * 将Blob转换为Base64
   * @param {Blob} blob - Blob对象
   * @returns {Promise<string>} - Base64字符串
   */
  static blobToBase64(blob) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => resolve(e.target.result);
      reader.onerror = () => reject(new Error('转换为Base64失败'));
      reader.readAsDataURL(blob);
    });
  }
}

// 使用示例
async function example() {
  // 单个图片压缩
  const input = document.querySelector('input[type="file"]');
  if (input.files.length > 0) {
    try {
      const compressedBlob = await ImageCompressor.compressImage(input.files[0], {
        maxWidth: 1280,
        maxHeight: 720,
        maxSize: 100 * 1024, // 100KB
        quality: 0.8,
        outputType: 'image/jpeg',
        onProgress: (progress) => {
          console.log(`压缩进度: ${progress}%`);
        }
      });
      
      // 转换为Base64查看
      const base64 = await ImageCompressor.blobToBase64(compressedBlob);
      console.log('压缩后大小:', compressedBlob.size, '字节');
      
      // 创建预览
      const img = document.createElement('img');
      img.src = base64;
      document.body.appendChild(img);
    } catch (error) {
      console.error('压缩失败:', error);
    }
  }
  
  // 批量压缩
  /*
  const files = [...input.files];
  try {
    const compressedBlobs = await ImageCompressor.compressImages(files, {
      maxWidth: 1280,
      maxHeight: 720,
      maxSize: 100 * 1024,
      quality: 0.8,
      onBatchProgress: (progress, current, total) => {
        console.log(`批量压缩进度: ${progress}% (${current + 1}/${total})`);
      }
    });
    
    compressedBlobs.forEach((blob, index) => {
      if (blob) {
        console.log(`第${index + 1}张图片压缩后大小:`, blob.size, '字节');
      } else {
        console.log(`第${index + 1}张图片压缩失败`);
      }
    });
  } catch (error) {
    console.error('批量压缩失败:', error);
  }
  */
}

技术特点 ​

  1. 等比例缩放：使用精确的缩放比例计算，确保图片不变形
  2. 多级压缩策略：
    • 首先根据尺寸限制进行等比例缩放
    • 然后通过调整质量参数达到大小限制
    • 最后如果仍超过大小限制，再次缩小尺寸
  3. 错误处理：完善的错误捕获和提示机制
  4. 性能优化：
    • 使用异步处理避免阻塞主线程
    • 合理的质量递减策略减少不必要的计算
  5. 进度反馈：提供详细的压缩进度信息
  6. 批量处理：支持多图片同时压缩，并提供整体进度反馈
  7. 格式支持：支持常见的图片格式输入和输出
  8. 灵活配置：提供丰富的配置选项满足不同需求

使用场景 ​

  • 图片上传前的预处理
  • 移动端图片优化
  • 网页图片加载性能优化
  • 批量图片处理

注意事项 ​

  1. 由于Canvas的限制，压缩后的图片可能会丢失一些元数据（如EXIF信息）
  2. 对于PNG格式的透明图片，建议使用'image/png'作为输出格式以保持透明度
  3. 压缩过程会占用一定的内存，对于非常大的图片可能会有性能问题
  4. 在移动设备上，建议适当降低maxWidth和maxHeight以获得更好的性能

浏览器兼容性 ​

  • 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）
  • 不支持IE11及以下版本

性能测试 ​

原始图片原始大小压缩后大小压缩时间
4000x3000 JPEG5MB~100KB~300ms
2000x1500 JPEG2MB~50KB~150ms
1000x750 JPEG500KB~20KB~50ms

注：测试结果基于Chrome浏览器，实际性能可能因设备性能而异。