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 法师URL。 但是，它可以正常工作，但有时会提供完整图像的不同部分，有时是图像的50％，有时是70％。 html很长，我认为它是在将 html节点转换为canvas 或 canvas.toDataURL（'image / png'）之前完成的打印工作。

该函数是 async 函数，因此在完成完整的html转换之前会先进行记录。有什么办法解决吗？

请看看

Answer 1

要使用await，正在等待的操作应为promise返回函数。因此，即使您已经等待，代码仍然可以异步工作。您需要在等待中返回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
}

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

Answer 2

承诺：htmlToImg

export default = (id) =>  new Promise((resolve, reject) => {
        html2canvas(document.getElementById(id), {
            scale: 1
        }).then(canvas => {
            let img = canvas.toDataURL('image/png')
            resolve(img,null)
        }).catch(err=>reject(null,err);
})

信守诺言

import htmlToImg from 'your htmlToImg path';

htmlToImg(pass_your_id)
.then( ( image , err ) => { 
 if(err) { console.log(err) } 
 console.log('my image',image)
})

完成工作之前的javascript函数记录

2 个答案: