如何在onload函数中返回值，解决base64SquareCrop返回undefined问题

问题根因 #

• 异步执行逻辑错误：img.onload是异步回调函数，回调内部的return只会返回给回调本身，外层的base64SquareCrop函数不会等待onload触发就已经执行完毕，自然拿不到返回值
• 无效await：img.setAttribute是同步方法，返回值为undefined，await操作没有任何实际作用，并没有等待图片加载完成
• 静态宽高写死：原代码里宽高固定为1240/698，没有读取实际加载的图片尺寸，会导致裁剪比例错误
• 未声明canvas对象：原代码直接使用canvasImage，如果全局没有提前定义会抛出引用错误

修复后代码 #

async function base64SquareCrop(imgbase64, size = 224) {
  // 创建图片和画布对象
  const img = document.createElement("img");
  const canvasImage = document.createElement("canvas");
  // 若需要处理跨域图片可放开下面注释
  // img.crossOrigin = 'anonymous';

  // 用Promise包裹异步逻辑，加载完成后返回结果
  return new Promise((resolve, reject) => {
    img.onload = function() {
      // 读取图片实际尺寸
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      const min = Math.min(width, height);
      const scale = size / min;
      const scaledW = Math.ceil(width * scale);
      const scaledH = Math.ceil(height * scale);
      const dx = scaledW - size;
      const dy = scaledH - size;

      canvasImage.width = canvasImage.height = size;
      const ctx_img = canvasImage.getContext("2d");
      ctx_img.drawImage(
        img,
        ~~(dx / 2) * -1,
        ~~(dy / 2) * -1,
        scaledW,
        scaledH
      );
      resolve(canvasImage.toDataURL("image/png"));
    }
    // 加载失败异常捕获
    img.onerror = reject;
    // src赋值放在onload绑定后，避免缓存图片触发onload时回调未绑定
    img.src = imgbase64;
  })
}

使用方式 #

调用时直接await函数即可拿到裁剪后的base64结果：
const croppedImg = await base64SquareCrop(原始base64, 目标尺寸)

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