如何创建含Canvas元素的Promise？缩略图生成函数转Promise遇阻求助

我来帮你理清这个问题，核心就是把异步的图片加载和Canvas绘制过程用Promise包装起来，这样就能用Promise.all正确等待所有操作完成了。

首先得明确两个关键点：

• 为什么之前thumb是undefined？因为图片加载、Canvas绘制都是异步操作，直接同步返回结果的话，代码还没等到图片加载完成就已经执行完了，自然拿不到有效值。
• img.onload的作用是什么？浏览器加载图片需要时间（不管是远程URL还是本地文件），只有触发onload事件时，图片的宽高、像素数据才完全可用，这时候才能在Canvas上正确绘制——跳过这一步直接操作的话，Canvas根本画不出内容。

接下来一步步解决你的问题：

第一步：封装生成缩略图的Promise函数 #

把整个缩略图生成逻辑包裹在Promise里，让函数返回一个Promise对象，这样就能通过then获取最终结果：

function generateThumbnail(imageSource, maxWidth = 200, maxHeight = 200) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 如果是跨域图片，需要开启这个配置（同时服务器要允许跨域）
    img.crossOrigin = 'anonymous';

    // 图片加载成功后执行Canvas绘制逻辑
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 计算缩略图尺寸，保持原图片比例不变
      let [width, height] = [img.width, img.height];
      if (width > maxWidth) {
        height = (maxWidth / width) * height;
        width = maxWidth;
      }
      if (height > maxHeight) {
        width = (maxHeight / height) * width;
        height = maxHeight;
      }

      // 设置Canvas尺寸并绘制图片
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      // 这里可以返回base64格式的缩略图，也可以返回Blob（按需选择）
      const thumbnailData = canvas.toDataURL('image/jpeg', 0.8);
      resolve(thumbnailData);

      // 如果需要返回Blob，用下面的代码：
      // canvas.toBlob(blob => resolve(blob), 'image/jpeg', 0.8);
    };

    // 处理图片加载失败的异常情况
    img.onerror = function(error) {
      reject(new Error(`加载图片失败：${error.message}`));
    };

    // 开始加载图片
    img.src = imageSource;
  });
}

第二步：用Promise.all等待所有缩略图生成 #

现在你可以把所有需要处理的图片源转成Promise数组，然后用Promise.all等待全部完成，这时候就能拿到所有生成好的缩略图了：

示例1：处理多个远程URL图片 #

// 假设你有一组图片URL
const imageUrls = ['/images/photo1.jpg', '/images/photo2.png', '/images/photo3.gif'];

// 把每个URL转成生成缩略图的Promise
const thumbnailPromises = imageUrls.map(url => generateThumbnail(url));

// 等待所有缩略图生成完成
Promise.all(thumbnailPromises)
  .then(allThumbnails => {
    // allThumbnails是一个数组，每个元素都是生成好的缩略图数据
    console.log('所有缩略图生成完成！', allThumbnails);
    // 这里可以做后续操作：渲染到页面、保存到本地等
  })
  .catch(error => {
    console.error('生成缩略图出错：', error);
  });

示例2：处理本地上传的File对象 #

如果是从文件上传控件获取的图片，可以用URL.createObjectURL生成临时URL传入函数，记得用完后释放临时URL避免内存泄漏：

const fileInput = document.getElementById('image-upload');
fileInput.addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  const thumbnailPromises = files.map(file => {
    const tempUrl = URL.createObjectURL(file);
    return generateThumbnail(tempUrl).finally(() => URL.revokeObjectURL(tempUrl));
  });

  Promise.all(thumbnailPromises)
    .then(allThumbnails => {
      console.log('上传文件的缩略图全部生成！', allThumbnails);
    })
    .catch(error => {
      console.error('生成缩略图失败：', error);
    });
});

为什么之前用$scope是糟糕的做法？ #

把异步操作的结果存在$scope里，相当于把异步结果的管理交给了全局作用域，会带来很多问题：

• 竞态条件：多个异步操作同时修改$scope的同一个属性，导致结果被覆盖或混乱；
• 代码不可控：你很难跟踪$scope里的属性什么时候会被更新，调试起来非常麻烦；
• 不符合异步编程最佳实践：Promise本身就是用来管理异步流程的，通过then链式调用或者async/await可以更清晰地控制代码执行顺序，比依赖全局作用域传递数据可靠得多。

内容的提问来源于stack exchange，提问作者Ali_bean