如何在JavaScript中获取图片转Base64函数的回调值并存储？

你的问题核心在于convertImageToBase64是异步函数——图片加载是异步操作，回调函数只会在图片加载完成后才执行，所以不能用同步代码的逻辑直接赋值变量。下面给两种实用的解决方法：

方法一：直接在回调函数内处理变量赋值与后续逻辑 #

直接在回调函数里把转换后的Base64字符串赋值给变量，并且所有依赖这个变量的操作都要放在回调内部（确保变量已经被正确赋值）：

// 先声明变量（注意作用域，要在回调能访问到的地方）
let base64Empresa = '';
let base64Propia = '';

// 处理第一张图片
convertImageToBase64(imgEmpresa, (dataUrl) => {
  base64Empresa = dataUrl;
  // 这里可以直接使用变量，比如渲染到页面
  document.getElementById('empresa-img').src = base64Empresa;
});

// 处理第二张图片
convertImageToBase64(imgPropia, (dataUrl) => {
  base64Propia = dataUrl;
  console.log(base64Propia); // 这里能拿到正确的Base64字符串
});

方法二：封装为Promise，用async/await简化异步逻辑 #

如果觉得回调嵌套不够直观，可以把原函数改造成Promise形式，配合async/await实现同步写法的异步逻辑，同时还能方便地处理错误：

改造后的转换函数 #

function convertImageToBase64(imgUrl) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'anonymous';
    
    image.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.height = image.naturalHeight;
      canvas.width = image.naturalWidth;
      ctx.drawImage(image, 0, 0);
      resolve(canvas.toDataURL());
    };
    
    // 新增错误处理，避免图片加载失败无响应
    image.onerror = (error) => {
      reject(`图片加载失败: ${error.message}`);
    };
    
    image.src = imgUrl;
  });
}

调用方式（单张/多张图片） #

// 用async函数包裹，因为await只能在async函数内使用
async function handleImageConversion() {
  try {
    // 单张图片转换
    const base64Empresa = await convertImageToBase64(imgEmpresa);
    console.log(base64Empresa);
    
    // 多张图片并行转换（效率更高）
    const [base64Empresa, base64Propia] = await Promise.all([
      convertImageToBase64(imgEmpresa),
      convertImageToBase64(imgPropia)
    ]);
    
    // 这里可以直接使用两个变量做后续操作
    console.log(base64Empresa, base64Propia);
  } catch (err) {
    console.error(err);
  }
}

// 执行函数
handleImageConversion();

为什么你之前的尝试无效？ #

如果之前你写了类似const base64 = convertImageToBase64(imgUrl, () => { return dataUrl; })的代码，本质错误是：

• 原函数本身没有返回值，所以base64会是undefined
• 回调函数的return只会在异步执行时返回值，无法传递到外部的同步变量赋值语句中——异步操作完成前，外部的赋值语句已经执行完毕了

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