Question

我正在项目中使用html2canvas并出现以下问题：

我正在尝试将div捕获为图像，并创建一个包含该图像URL的文件类型。但是结果始终显示为 2680ms html2canvas：无法加载图片未定义，此后调用** takeScreenShot函数并且在单击按钮时不显示图像URL。关于这个问题有帮助吗？

这是我在react应用中用于画布的代码部分：

takeScreenShot(e) {
    e.preventDefault();
    let imageView = document.querySelector(".image_view_101");

    html2canvas(imageView).then(canvas => {
        console.log(canvas);
        let imgData = canvas.toDataURL("image/png");
        console.log("canvas", imgData);
    });
}

Answer 1

而不是使用document.querySelector（），而是使用document.getElementById（此处为div ID）

Answer 2

我花了很多时间，最后在脚本工作下，我使用相同的函数在多个地方生成pdf。我在Reactjs中使用了

功能：-

 async printResult(){
    const { canvasSelector, pdfName } = this.props;
    if(canvasSelector !== undefined && pdfName !== undefined){
    this.setState({ loader2: true });    

    let CurrentDate   =  new Date();

    var pilotRhLogo = new Image();
    pilotRhLogo.src = 'assets/images/logo.png';

    var PDF_Heighti   = document.querySelector('#'+canvasSelector).offsetWidth;
    var HTML_Width    = 790;
    var HTML_Height   = $('#'+canvasSelector).height();
    var top_left_margin = 5;
    var PDF_Width = HTML_Width+(top_left_margin*2);
    var PDF_Height = HTML_Height+(top_left_margin*2);

    var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
    html2canvas($('#'+canvasSelector)[0],{allowTaint:true}).then((canvas) => {
      canvas.getContext('2d');
      //console.log(canvas.height+" "+canvas.width);
      var imgData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
      //var pdf = new jsPDF();
      pdf.addImage(pilotRhLogo, 'PNG', 330, 10);
      pdf.addImage(imgData, 'JPG', 10, 80);
      for (var i = 1; i <= totalPDFPages; i++) {
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -PDF_Heighti+(top_left_margin));
      }
      pdf.setFontSize(12);
      pdf.setTextColor(108, 117, 125);
      pdf.text(160, (PDF_Height-40),'© Copyright 5W PILOT RH SOLUTIONS '+ CurrentDate.getFullYear() +' – All right reserved – www.pilotrhsolutions.com.');
      pdf.setTextColor(23, 162, 184);
      pdf.setFontType("bold");
      pdf.text(310, (PDF_Height-20), localStorage.getItem("userName").toUpperCase()+' - '+("0" + (CurrentDate.getDate() + 1)).slice(-2) +'/'+ ("0" + (CurrentDate.getMonth() + 1)).slice(-2)  +'/'+ CurrentDate.getFullYear()+' - '+ CurrentDate.getHours()+':'+ CurrentDate.getMinutes());
      pdf.save(pdfName+".pdf");
      this.setState({ loader2: false });
    });
    }
}

如何在Reactjs中调用函数

<button onClick={e => this.printResult(e)} className="btn btn-info mt-3 w-50">
  <FormattedMessage id="btn.save.your.result" defaultMessage="SAVE YOUR RESULTS"/>
</button>

html2canvas无法加载未定义的图像

2 个答案: