如何修改getThumbnail函数返回压缩后的base64 dataUrl提交至后端

问题根源 #

htmlToImage.toPng 是异步Promise操作，原函数在异步任务完成前就返回了初始空字符串，导致最终提交的thumbnail字段为空。

修改方案 #

方案1：用async/await改造函数 #

将getThumbnail声明为异步函数，通过await等待异步操作完成后再返回压缩结果：

async function getThumbnail(element) {
  try {
    // 等待htmlToImage生成PNG的dataUrl
    const originalDataUrl = await htmlToImage.toPng(element);
    // 执行你的压缩逻辑（替换为实际压缩代码）
    const compressedDataUrl = compressDataUrl(originalDataUrl);
    return compressedDataUrl;
  } catch (error) {
    console.error('生成缩略图出错:', error);
    return ''; // 或根据业务需求抛出错误
  }
}

调用时需在异步上下文中使用await获取结果：

async function saveCertificate() {
  const certElement = document.getElementById('certificate-container');
  // 等待缩略图生成完成
  const thumbnail = await getThumbnail(certElement);
  // 构造提交payload
  const payload = {
    // 其他证书相关字段
    thumbnail: thumbnail
  };
  // 提交到后端
  await fetch('/api/certificates/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
}

方案2：让函数直接返回Promise #

若不想使用async/await，可让getThumbnail直接返回Promise链，调用方通过.then获取结果：

function getThumbnail(element) {
  return htmlToImage.toPng(element)
    .then(originalDataUrl => {
      // 执行压缩逻辑
      return compressDataUrl(originalDataUrl);
    })
    .catch(error => {
      console.error('生成缩略图出错:', error);
      return '';
    });
}

调用示例：

function saveCertificate() {
  const certElement = document.getElementById('certificate-container');
  getThumbnail(certElement)
    .then(thumbnail => {
      const payload = {
        // 其他字段
        thumbnail: thumbnail
      };
      // 提交到后端
      fetch('/api/certificates/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
    });
}

关键说明 #

两种方案的核心都是等待异步任务完成后再获取结果，不能在异步操作未结束时直接返回初始值。调用getThumbnail的代码必须处于异步流程中，才能拿到正确的缩略图dataUrl。

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