前端人别硬扛：Canvas搞定图片压缩与Base64互转实战

前端人别硬扛：Canvas搞定图片压缩与Base64互转实战

咱就是说，这图大到离谱，不压一下服务器都要报警了

兄弟们，咱今天聊点实在的。你们有没有遇到过这种场景：用户开开心心点了个上传图片，结果进度条走了五分钟还在转圈圈，最后"啪"一声报错超时。你打开控制台一看，好家伙，一张自拍8MB，还是HEIC格式转过来的。这时候你内心是不是有一万只草泥马奔腾而过？

我就见过更离谱的。之前有个做电商的朋友，他们运营同事为了展示"高清细节"，把商品图全传了原图。结果一张详情页十几张图，加起来快100MB。用户用4G流量打开，直接欠费停机。老板在群里@所有人问为什么转化率暴跌，场面一度非常尴尬。

所以啊，前端压缩这事儿，真不是咱们吃饱了撑的非要炫技。这是刚需，是底线，是保住服务器和用户体验的最后一道防线。你想啊，后端压缩当然可以，但带宽已经出去了啊！用户上传那8MB的过程中，流量耗了、时间花了、耐心没了。等传到服务器再压缩，黄花菜都凉了。

而且现在的手机摄像头多恐怖？iPhone 15 Pro主摄4800万像素，拍一张照片原始数据十几MB。用户才不管你什么技术细节，他们就觉得"你家APP怎么这么卡"。所以咱们得在浏览器里就把这事儿办了，把大图"捏"成小图，把File和Base64玩转于股掌之间。

说到Base64和File这俩货，很多人其实没搞明白它们到底啥关系。简单说：File是"文件本体"，带着文件名、类型、大小这些元信息；Base64是"字符串化的文件"，把二进制数据编码成ASCII字符。为啥要互转？场景多了去了：要存localStorage得转Base64，要formData上传得转File，要预览直接塞img标签src，有时候Base64更方便，有时候File更正宗。今天咱们就用Canvas这个"老法师"，把这俩的转换彻底捋顺。

扒一扒Canvas这个"老法师"到底咋回事

别被Canvas这个名字吓到，听着挺高大上，其实就是个HTML标签，跟div、p没本质区别。只不过它自带一个"画图环境"，能让你用JavaScript在上面画画、写字、贴图片。最早是HTML5搞出来的，现在兼容性已经好到连IE9都能勉强支持（虽然谁还管IE啊）。

咱们今天要用到的核心API其实就三个：drawImage、toDataURL、toBlob。这三个组合拳打下来，图片压缩和格式转换基本就齐活了。

先说说drawImage，这是把图片塞进Canvas的关键动作。它有好几种重载形式，最常用的是这种：

// 基础语法，把图片画到画布上
ctx.drawImage(image, dx, dy);
// 带尺寸的，可以拉伸或压缩
ctx.drawImage(image, dx, dy, dWidth, dHeight);
// 裁剪版的，只画图片的一部分
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

看到没？那个dWidth和dHeight就是咱们压缩图片的命门。原图4000x3000，你给它画成800x600，像素量直接降到1/25，体积自然就下来了。

然后是toDataURL和toBlob这俩亲兄弟。它俩都是把Canvas里的内容导出来，但性格完全不同：

// toDataURL：生成Base64字符串，可以直接塞给img标签
const base64 = canvas.toDataURL('image/jpeg', 0.8);
// 第一个参数是MIME类型，第二个是质量系数0-1

// toBlob：生成Blob对象，可以转成File用于上传
canvas.toBlob((blob) => {
  // blob就是二进制大对象，虽然名字像 Blob（水滴），但其实是 Binary Large Object
  const file = new File([blob], 'compressed.jpg', { type: 'image/jpeg' });
}, 'image/jpeg', 0.8);

这里要提一嘴内存问题。Canvas是把图片解码成原始像素存在内存里的。一张4000x3000的RGBA图片，占用内存是 4000 * 3000 * 4 = 48MB。如果用户连续选十几张图，同时塞进Canvas，低端手机直接给你闪退信不信？所以用完记得清理：

// 用完画布，宽高置零可以释放内存（虽然浏览器不保证立即回收）
canvas.width = 0;
canvas.height = 0;
// 或者直接把canvas元素移除
canvas.remove();

还有个小细节：Canvas默认是透明的，如果压缩JPEG（不支持透明），你会发现透明区域变成黑色了。这时候得先铺一层白色背景：

// 在drawImage之前先画个白底
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 然后再画图片
ctx.drawImage(img, 0, 0, newWidth, newHeight);

手把手教你怎么把大图"捏"小，还能随意变身

好了，理论讲完，上硬菜。咱们从头撸一个完整的图片压缩+转换工具类。这个类要能干这些事：File转压缩后的File、File转Base64、Base64转File、支持自定义尺寸和质量。

首先，把图片"捞"进来。不管是input file选的，还是接口拉的URL，都得先转成Image对象才能往Canvas里画：

class ImageCompressor {
  constructor(options = {}) {
    // 默认配置，可以覆盖
    this.config = {
      maxWidth: 1920,      // 最大宽度
      maxHeight: 1920,     // 最大高度
      quality: 0.8,        // 压缩质量
      mimeType: 'image/jpeg', // 输出格式
      ...options
    };
  }

  /**
   * 加载图片，支持File对象或URL
   * @param {File|string} source - 图片源
   * @returns {Promise<HTMLImageElement>}
   */
  loadImage(source) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      
      // 处理跨域， crucial！不然画布会被污染
      img.crossOrigin = 'anonymous';
      
      img.onload = () => resolve(img);
      img.onerror = (e) => reject(new Error('图片加载失败: ' + e.message));
      
      if (source instanceof File) {
        // File对象，用FileReader转DataURL
        const reader = new FileReader();
        reader.onload = (e) => {
          img.src = e.target.result;
        };
        reader.readAsDataURL(source);
      } else if (typeof source === 'string') {
        // 直接是URL或Base64字符串
        img.src = source;
      } else {
        reject(new Error('不支持的图片源类型'));
      }
    });
  }

看到没？这里已经埋了个坑的解决方案：crossOrigin = 'anonymous'。如果不加这个，画完图后调用toDataURL会直接报错"Uncaught SecurityError: Tainted canvases may not be exported"。因为浏览器安全策略，跨域图片会"污染"画布，后续导出操作全部封杀。

接下来是核心压缩逻辑。咱们要智能计算新尺寸，保持比例的同时不超过最大宽高：

  /**
   * 计算压缩后的尺寸，保持比例
   * @param {number} naturalWidth - 原始宽
   * @param {number} naturalHeight - 原始高
   * @returns {Object} 新尺寸
   */
  calculateSize(naturalWidth, naturalHeight) {
    let { maxWidth, maxHeight } = this.config;
    let width = naturalWidth;
    let height = naturalHeight;
    
    // 如果图片本身就不大，就不压缩了，省得画质损失
    if (width <= maxWidth && height <= maxHeight) {
      return { width, height };
    }
    
    // 计算缩放比例，取小的那个保证不超出
    const ratio = Math.min(maxWidth / width, maxHeight / height);
    
    return {
      width: Math.floor(width * ratio),
      height: Math.floor(height * ratio)
    };
  }

  /**
   * 核心压缩方法：File -> 压缩后的File
   * @param {File} file - 原始文件
   * @returns {Promise<File>}
   */
  async compress(file) {
    try {
      // 1. 加载图片
      const img = await this.loadImage(file);
      
      // 2. 计算新尺寸
      const { width, height } = this.calculateSize(img.naturalWidth, img.naturalHeight);
      
      // 3. 创建Canvas（离屏，不插入DOM）
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = width;
      canvas.height = height;
      
      // 4. 如果是JPEG，先铺白底（处理透明PNG的情况）
      if (this.config.mimeType === 'image/jpeg') {
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, width, height);
      }
      
      // 5. 画图！核心动作
      // 用更好的图像质量设置
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';
      ctx.drawImage(img, 0, 0, width, height);
      
      // 6. 导出为Blob，再转File
      return new Promise((resolve, reject) => {
        canvas.toBlob((blob) => {
          if (!blob) {
            reject(new Error('Canvas转Blob失败'));
            return;
          }
          
          // 生成新文件名，加上compressed标识
          const originalName = file.name;
          const extension = this.config.mimeType.split('/')[1];
          const newName = originalName.replace(/\.[^/.]+$/, '') + '_compressed.' + extension;
          
          const compressedFile = new File([blob], newName, {
            type: this.config.mimeType,
            lastModified: Date.now()
          });
          
          // 清理内存，好习惯
          canvas.width = 0;
          canvas.height = 0;
          
          resolve(compressedFile);
        }, this.config.mimeType, this.config.quality);
      });
      
    } catch (error) {
      console.error('压缩失败:', error);
      // 失败了返回原文件，别搞崩业务
      return file;
    }
  }

这段代码里藏着几个细节。imageSmoothingQuality = 'high'能让缩放后的图片更清晰，默认是’low’，出来的图糊得跟马赛克似的。还有toBlob的quality参数，对于JPEG是0-1的质量系数，0.7通常是个甜点，体积能省60%以上，肉眼基本看不出损失。但如果是PNG，这个参数会被忽略，因为PNG是无损压缩。

再来个File转Base64的方法，这个更简单：

  /**
   * File转Base64，带压缩
   * @param {File} file - 原始文件
   * @returns {Promise<string>} Base64字符串
   */
  async fileToBase64(file) {
    const img = await this.loadImage(file);
    const { width, height } = this.calculateSize(img.naturalWidth, img.naturalHeight);
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    
    if (this.config.mimeType === 'image/jpeg') {
      ctx.fillStyle = '#FFFFFF';
      ctx.fillRect(0, 0, width, height);
    }
    
    ctx.drawImage(img, 0, 0, width, height);
    
    const base64 = canvas.toDataURL(this.config.mimeType, this.config.quality);
    
    // 清理
    canvas.width = 0;
    canvas.height = 0;
    
    return base64;
  }

最骚的是Base64转File。有时候后端给你返回个Base64字符串，或者你从localStorage里读出来，要转成File对象上传。这里有两种路子：

  /**
   * Base64转File，方法一：fetch（现代浏览器推荐）
   * @param {string} base64 - Base64字符串，包含data:image/xxx;base64,前缀
   * @param {string} filename - 文件名
   * @returns {Promise<File>}
   */
  async base64ToFile(base64, filename = 'image.jpg') {
    try {
      const response = await fetch(base64);
      const blob = await response.blob();
      return new File([blob], filename, { type: blob.type });
    } catch (error) {
      console.error('Base64转File失败:', error);
      throw error;
    }
  }

  /**
   * Base64转File，方法二：手动解析（兼容性好）
   * @param {string} base64 - Base64字符串
   * @param {string} filename - 文件名
   * @returns {File}
   */
  base64ToFileLegacy(base64, filename = 'image.jpg') {
    // 把Base64的头部去掉，拿到纯数据
    const arr = base64.split(',');
    const mime = arr[0].match(/:(.*?);/)[1]; // 提取MIME类型
    const bstr = atob(arr[1]); // Base64解码
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    
    // 转成Uint8Array
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    
    return new File([u8arr], filename, { type: mime });
  }

方法一用fetch，代码简洁，但IE肯定不支持（不过都2024年了谁还管IE）。方法二用atob解码Base64，再手动组装成TypedArray，最后塞给File构造函数。注意这里atob解码出来的是二进制字符串，每个字符是一个字节，所以要charCodeAt转成数字再存Uint8Array。

这招虽好，但也不是万能药，有些坑你得先知道

兄弟们，代码能跑通只是第一步，生产环境里的坑那才是真的坑。我踩过的雷，你们能避就避。

第一坑：压缩太狠，脸都磨没了

那个quality参数别乱调。0.7是经验值，但如果是文字截图、线稿图，0.7可能文字边缘都糊了。建议根据图片类型动态调整：

// 简单判断图片类型，调整压缩策略
function getCompressionConfig(file) {
  // 如果文件名包含screenshot、screen等关键词，可能是截图，文字多
  if (/screen|shot|capture/i.test(file.name)) {
    return { quality: 0.9, mimeType: 'image/png' }; // 用PNG保清晰
  }
  // 照片类用JPEG高压缩
  return { quality: 0.7, mimeType: 'image/jpeg' };
}

还有，别对同一张图反复压缩。每次JPEG压缩都是有损的，压一次损失一次细节。如果你先压成0.5，再拿这个结果压成0.5，最后跟直接压0.25完全不是一个概念，画质崩得更厉害。

第二坑：iOS Safari这个傲娇怪

苹果家的浏览器，在Canvas处理上总有自己的"想法"。最常见的是图片方向问题。手机拍照有EXIF的Orientation信息，告诉图片哪边是朝上。但Canvas的drawImage完全不理这个，导致竖着拍的照片画出来是横的，而且可能还镜像了。

解决这个得引入exif-js或者exifreader库读取Orientation，然后手动旋转Canvas：

// 处理iOS图片方向的伪代码
import EXIF from 'exif-js';

async function fixOrientation(file, img) {
  const orientation = await new Promise((resolve) => {
    EXIF.getData(file, function() {
      resolve(EXIF.getTag(this, 'Orientation'));
    });
  });
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 根据Orientation旋转画布
  // 1:正常 3:180度 6:顺时针90 8:逆时针90
  switch(orientation) {
    case 3:
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate(Math.PI);
      ctx.drawImage(img, -img.width, -img.height);
      break;
    case 6:
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate(Math.PI / 2);
      ctx.drawImage(img, 0, -img.height);
      break;
    // ...其他情况
    default:
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
  }
  
  return canvas;
}

还有个iOS特有的坑：Canvas内存限制。iOS设备对单个Canvas的像素数量有限制，超过就会画不出来。据说iPhone 12之前是16MB像素数据（比如4096x4096就超了），新款放宽了但也不是无限的。所以超大图得做分片处理，或者先判断尺寸，太大就跳过压缩直接传原图。

第三坑：Base64太长，URL塞不下

Base64字符串比原二进制数据大约33%，因为每3个字节变成4个ASCII字符。如果你把多张图的Base64拼在一起塞URL参数，很容易就超过浏览器限制（不同浏览器不同，大概2KB-8KB）。这时候要么用POST请求塞body里，要么别用Base64，直接用Blob上传。

还有localStorage的5MB限制，存几张高清Base64就满了。建议用IndexedDB或者直接存File对象（如果不需要持久化）。

真实项目里这玩意儿到底能救多少命

理论讲了一堆，看看实际场景怎么救命。

场景一：头像上传，体验起飞

用户设置头像，选了张刚拍的自拍。原图4MB，上传要10秒，进度条卡在那用户以为死机了。用咱们这个压缩，前端先压到200KB，上传1秒完事，后端存储压力也小。而且压缩后的图对于头像展示完全够用，谁头像需要4K分辨率啊？

// 头像上传组件里的使用
const compressor = new ImageCompressor({
  maxWidth: 400,   // 头像不需要大
  maxHeight: 400,
  quality: 0.8,
  mimeType: 'image/jpeg'
});

input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  // 显示"处理中"状态
  showLoading();
  
  try {
    const compressed = await compressor.compress(file);
    console.log(`原图: ${(file.size/1024).toFixed(2)}KB -> 压缩后: ${(compressed.size/1024).toFixed(2)}KB`);
    
    // 预览
    const previewUrl = URL.createObjectURL(compressed);
    document.getElementById('avatar-preview').src = previewUrl;
    
    // 准备上传
    const formData = new FormData();
    formData.append('avatar', compressed);
    
    await uploadAvatar(formData);
    showSuccess();
  } catch (err) {
    showError('上传失败，请重试');
  }
});

场景二：长图分享，朋友圈神器

有些H5页面要生成分享海报，用html2canvas把DOM转成图片。但生成的Canvas直接toDataURL可能很大，特别是长页面。这时候先压缩再转Base64，分享出去加载快，用户不流失。

// 生成分享图并压缩
async function generateShareImage() {
  const canvas = await html2canvas(document.querySelector('.share-container'), {
    scale: 2, // 高清屏用2倍图
    useCORS: true
  });
  
  // 如果图太大，再压一层
  if (canvas.width > 1000 || canvas.height > 2000) {
    const compressor = new ImageCompressor({ maxWidth: 800, quality: 0.7 });
    // 这里需要把canvas再画到小canvas上，或者直接用toBlob控制质量
    return new Promise((resolve) => {
      canvas.toBlob((blob) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(blob);
      }, 'image/jpeg', 0.7);
    });
  }
  
  return canvas.toDataURL('image/jpeg', 0.8);
}

场景三：表单多图上传，后端无感知

有些表单要传身份证正反面、手持照，三张图原图可能20MB。前端统一压缩到每张500KB以内，后端接口完全不用改，因为收到的还是File对象，只是体积小了很多。用户体验从"转圈圈等到天荒地老"变成"秒传"。

// 多图批量压缩
async function batchCompress(files) {
  const compressor = new ImageCompressor({ quality: 0.75 });
  const promises = files.map(file => compressor.compress(file));
  return Promise.all(promises);
}

// 使用
const input = document.getElementById('multi-upload');
input.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const compressedFiles = await batchCompress(files);
  
  // 总大小对比
  const originalSize = files.reduce((sum, f) => sum + f.size, 0);
  const compressedSize = compressedFiles.reduce((sum, f) => sum + f.size, 0);
  console.log(`批量压缩: ${(originalSize/1024/1024).toFixed(2)}MB -> ${(compressedSize/1024/1024).toFixed(2)}MB`);
  
  // 正常走上传逻辑
  const formData = new FormData();
  compressedFiles.forEach((file, index) => {
    formData.append(`image_${index}`, file);
  });
});

场景四：离线编辑，没网也能玩

PWA应用里，用户可能没网络但要编辑图片。用Canvas做滤镜、裁剪、涂鸦，最后把结果存成Base64放到IndexedDB里。等有网了再取出来转File上传。这套流程跑通了，体验可以做得跟原生App一样丝滑。

遇到Bug别慌，大概率是这几个鬼地方在作祟

代码写多了，bug是难免的。这里列几个Canvas图片处理的高频报错和解决方案。

Bug 1：跨域污染，toDataURL报错

症状：控制台红字"Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported."

原因：你画的图片来自其他域名，且服务器没开CORS，或者你忘了设置crossOrigin。

解决：

const img = new Image();
img.crossOrigin = 'anonymous'; // 必须在src设置之前！
img.src = 'https://example.com/pic.jpg';

// 如果还是报错，说明服务器没返回Access-Control-Allow-Origin头
// 这时候只能让后端代理图片，或者换同源图片

注意crossOrigin必须在src赋值之前设置，否则无效。如果图片已经缓存了，可能还要加随机数清缓存：src = url + '?t=' + Date.now()。

Bug 2：异步陷阱，拿到空包弹

症状：压缩后的图片是纯黑的，或者尺寸对但内容空白。

原因：图片还没加载完就画了。虽然你写了onload，但可能有竞态条件，或者你在onload里画了但立即执行了导出。

解决：确保完全加载，可以用decode()方法：

const img = new Image();
img.src = 'xxx';
// 比onload更靠谱的解码完成信号
await img.decode(); 
ctx.drawImage(img, 0, 0);
// 现在安全了
const dataUrl = canvas.toDataURL();

Bug 3：移动端竖图变横图

前面提过的EXIF方向问题。症状只有iOS出现，安卓正常。解决就是用exif库读Orientation然后手动旋转，代码前面有。

Bug 4：内存泄漏，页面越开越卡

症状：做单页应用，用户上传了几十张图后，浏览器标签页内存占用几个G，最后崩溃。

原因：Canvas没清理，Image对象没释放，Blob URL没revoke。

解决：

// 用完立即清理
function cleanup(canvas, img, objectUrl) {
  canvas.width = 0;
  canvas.height = 0;
  img.src = ''; // 释放图片资源
  if (objectUrl) {
    URL.revokeObjectURL(objectUrl); // 释放Blob URL
  }
}

// 如果是大量图片处理，考虑用Web Worker，避免阻塞主线程
// 或者分批处理，每处理完一张让出时间片
async function batchProcessWithYield(files) {
  const results = [];
  for (let i = 0; i < files.length; i++) {
    results.push(await process(files[i]));
    // 每处理5张，让出时间片给UI渲染
    if (i % 5 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
  return results;
}

几个让代码看起来像老司机写的野路子

代码能跑和代码写得好是两回事。这里分享几个让代码更专业的小技巧。

技巧1：防抖节流，保护CPU

用户选错图了，狂点重新选择，你别每次都立即压缩，CPU风扇要起飞了。用防抖：

import { debounce } from 'lodash-es';

const debouncedCompress = debounce(async (file) => {
  const result = await compressor.compress(file);
  updateUI(result);
}, 300);

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) debouncedCompress(file);
});

技巧2：假进度条，安抚用户

压缩大文件可能要几百毫秒，用户会觉得卡。搞个假的进度条动画，其实是定时的，但心理上舒服多了：

function compressWithProgress(file) {
  // 开始假进度
  let progress = 0;
  const progressBar = document.querySelector('.progress');
  const interval = setInterval(() => {
    progress += Math.random() * 10;
    if (progress > 90) progress = 90; // 卡在90等真实完成
    progressBar.style.width = progress + '%';
  }, 100);
  
  return compressor.compress(file).then(result => {
    clearInterval(interval);
    progressBar.style.width = '100%';
    setTimeout(() => progressBar.style.width = '0', 500); // 重置
    return result;
  });
}

技巧3：根据设备性能动态调整

高端iPhone和千元安卓机，压缩策略应该不同。可以根据内存或者像素比判断：

function getAdaptiveConfig() {
  const memory = navigator.deviceMemory || 4; // GB，Chrome支持
  const dpr = window.devicePixelRatio || 1;
  
  if (memory <= 2) {
    // 低端机，保守策略
    return { maxWidth: 1280, quality: 0.6, type: 'image/jpeg' };
  } else if (dpr >= 2) {
    // 高清屏，给点面子
    return { maxWidth: 1920, quality: 0.8, type: 'image/jpeg' };
  }
  return { maxWidth: 1600, quality: 0.7, type: 'image/jpeg' };
}

技巧4：封装通用Hook（Vue/React）

别到处复制粘贴，封装成 composable 或 hook：

// Vue3 Composable
import { ref } from 'vue';

export function useImageCompressor(options = {}) {
  const compressing = ref(false);
  const progress = ref(0);
  const error = ref(null);
  
  const compressor = new ImageCompressor(options);
  
  const compress = async (file) => {
    compressing.value = true;
    error.value = null;
    try {
      const result = await compressor.compress(file);
      return result;
    } catch (e) {
      error.value = e.message;
      throw e;
    } finally {
      compressing.value = false;
    }
  };
  
  return { compress, compressing, progress, error };
}

// 使用
const { compress, compressing } = useImageCompressor({ quality: 0.7 });
// 直接在模板里用compressing显示loading状态

万一翻车了怎么办，大不了咱们回滚重练

最后说说兜底策略。前端压缩只是优化，不是业务必需，千万别让它成为单点故障。

兜底1：压缩失败传原图

async function safeCompress(file) {
  try {
    return await compressor.compress(file);
  } catch (e) {
    console.warn('压缩失败，使用原图:', e);
    return file; // 原样返回，保证业务继续
  }
}

兜底2：超时机制

压缩太久（比如超过5秒），用户等不及了，直接放弃：

function compressWithTimeout(file, timeout = 5000) {
  return Promise.race([
    compressor.compress(file),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('压缩超时')), timeout)
    )
  ]);
}

兜底3：降级提示

如果检测到是超大图（比如>20MB），直接提示用户"图片太大建议换一张"，别硬压，手机真可能崩：

if (file.size > 20 * 1024 * 1024) {
  alert('图片超过20MB，为了您的手机安全，请压缩后重新选择');
  return;
}

兜底4：监控上报

把压缩成功率、耗时、失败原因上报到监控平台，及时发现线上问题：

compressor.compress(file).then(result => {
  reportMetrics('compress_success', {
    originalSize: file.size,
    compressedSize: result.size,
    duration: Date.now() - startTime,
    ratio: result.size / file.size
  });
}).catch(e => {
  reportMetrics('compress_fail', { reason: e.message });
});

---

写到这差不多收工了。Canvas图片压缩这技术，说难不难，就是API调用；说简单也不简单，坑都在细节里。关键是理解原理：Canvas就是个像素操作台，drawImage控制尺寸，toDataURL/toBlob控制输出格式和质量。

记住几个核心点：跨域头要加、内存要清、iOS方向要处理、失败要兜底。把这些做好了，代码稳得一批。

下次遇到产品说"用户传图慢"，你就可以甩出这套方案，深藏功与名。当然，如果用户非要用2G网络传100MB的RAW格式照片，那…咱们还是建议他换个5G手机吧，技术不是万能的，但咱尽力了。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

---

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！