如何确保canvas.toBlob()完成后再执行AJAX上传操作？

这个问题太典型了！你碰到的是异步函数执行顺序的坑——toBlob()是异步方法，它会在后台默默处理canvas转blob的操作，而主线程不会等它完成，会直接往下执行后续代码。所以你循环结束后立刻打印blobs.length时，所有的blobs.push(blob)都还没触发，数组自然是空的。

至于setTimeout能“凑效”，只是因为它给了异步操作足够的时间完成，但这是非常不可靠的：如果图片大、处理慢，5秒可能不够；如果处理快，又会白白浪费用户的时间。

正确的解决方案：用Promise + Promise.all等待所有异步操作完成 #

我们可以把每个canvas转blob的操作封装成Promise，然后用Promise.all()等待所有Promise都完成，再执行上传逻辑。

步骤1：封装canvas转blob为Promise函数 #

function canvasToBlob(canvas) {
  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(blob);
    }, 'image/jpeg', 0.75);
  });
}

步骤2：收集所有Promise并等待完成后上传 #

// 存储所有转blob的Promise实例
const blobPromises = [];

// 遍历所有图片，生成转blob的Promise
myImages.each(function() {
  const thisImage = $(this);
  // 获取裁剪后的canvas
  const canvas = thisImage.cropper('getCroppedCanvas', {
    width: parseInt(thisImage.attr('data-width')),
    height: parseInt(thisImage.attr('data-height'))
  });
  // 将转blob的Promise加入数组
  blobPromises.push(canvasToBlob(canvas));
});

// 等待所有转blob操作完成
Promise.all(blobPromises)
  .then((blobs) => {
    console.log(blobs.length); // 这里会得到正确的数量
    if (blobs.length > 0) {
      // 准备FormData用于上传
      const formData = new FormData();
      blobs.forEach((blob, index) => {
        // 给每个blob设置文件名，方便服务器识别
        formData.append(`cropped_images[${index}]`, blob, `image-${index}.jpg`);
      });

      // 发送AJAX上传
      $.ajax({
        url: '/your-upload-endpoint', // 替换成你的服务器上传接口
        type: 'POST',
        data: formData,
        // 这两个参数必须设置，否则FormData会被错误解析
        processData: false,
        contentType: false,
        success: (response) => {
          console.log('上传成功！', response);
        },
        error: (error) => {
          console.error('上传失败', error);
        }
      });
    }
  })
  .catch((error) => {
    console.error('转换Blob过程中出错', error);
  });

更简洁的async/await写法（支持ES6+环境） #

如果你的项目环境支持async/await，可以把代码写成更易读的异步函数形式：

// 先封装canvas转Blob的Promise函数（和上面一样）
function canvasToBlob(canvas) {
  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(blob);
    }, 'image/jpeg', 0.75);
  });
}

// 异步处理上传逻辑
async function uploadCroppedImages() {
  const blobPromises = [];

  myImages.each(function() {
    const thisImage = $(this);
    const canvas = thisImage.cropper('getCroppedCanvas', {
      width: parseInt(thisImage.attr('data-width')),
      height: parseInt(thisImage.attr('data-height'))
    });
    blobPromises.push(canvasToBlob(canvas));
  });

  try {
    // 等待所有Blob转换完成
    const blobs = await Promise.all(blobPromises);
    console.log(`共转换了${blobs.length}个Blob`);

    if (blobs.length > 0) {
      const formData = new FormData();
      blobs.forEach((blob, index) => {
        formData.append(`cropped_images[${index}]`, blob, `image-${index}.jpg`);
      });

      // 发送AJAX
      const response = await $.ajax({
        url: '/your-upload-endpoint',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false
      });

      console.log('上传成功！', response);
    }
  } catch (error) {
    console.error('处理或上传出错', error);
  }
}

// 调用上传函数
uploadCroppedImages();

这种方式的核心是用Promise.all()确保所有异步的转Blob操作都完成后，再执行上传逻辑，完全避免了setTimeout的不可靠性，是处理这类异步批量操作的标准方案。

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