完成工作前的javascript函数日志记录

Question

import html2canvas from 'html2canvas';

export default async function htmlToImg(id) {
  applyShadow(false);
  return await html2canvas(document.getElementById(id), {
      scale: 1
    })
    .then(canvas => {
      applyShadow(true);
      let img = canvas.toDataURL('image/png')
      console.log(img)
      return img
    });
}

在这里我分享了我的代码。

我正在尝试将一些 html 节点转换为画布，然后将其转换为 i mage url。 但是，这是工作，但是，它给整个图像有时不同部分的50％，有时70％的的形象。html 很长，我认为它在完成将html 节点转换为 canvas或canvas.toDataURL('image/png')之前正在打印。

该函数是异步函数，因此它在完成转换完整的 html 之前记录日志。有什么办法可以解决吗？

请看一看

Answer 1

要使用await，您正在等待的操作应该是一个承诺返回函数。因此，即使您设置了 await，代码仍在异步工作。您需要在 await 中返回 promise，如下所示：

async function htmlToImg(id) {
    applyShadow(false);
    myImg = await new Promise((resolve, reject) => {
        html2canvas(document.getElementById(id), {
            scale: 1
        }).then(canvas => {
            applyShadow(true);
            let img = canvas.toDataURL('image/png')
            console.log(img)
            resolve(img)
        });
    })
    return myImg
}

我希望这能解决您的问题。如果您仍然遇到任何问题，请告诉我，我会看看是否可以为您提供更多帮助。