html2canvas Unable to load image undefined

user_7345985 0
Viewed 2045

I am using the html2canvas in my project and getting the following issue:

enter image description here

I'm trying to capture a div as an image and create a file type containing that image URL. But the result is always showing 2680ms html2canvas: Unable to load image undefined after calling the **takeScreenShot function and not showing the image URL on button click. Any help regarding the issue?

Here's the portion of the code I am using for canvas in my react app:

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);
    });
}
html2canvas reactjs canvas html javascript
1 Answers

I spend a lot of time on this and finally below script work for me I used the same function to generate pdf multiple places.I used it in Reactjs

Function:-

 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 });
    });
    }
}

How to call the function in 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>
user_33142430
Related