question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

html2canvas(...).then is not a function

See original GitHub issue

var poster = document.querySelector('#poster'); poster.onclick = function() { html2canvas(msgImage).then(canvas => { var dataUrl = canvas.toDataURL('image/jpeg', 0.9); console.log(canvas, '[canvas]'); shareImage.src = dataUrl; generate.style.display = "block"; }); } Click the button in the test environment is normal, but the official environment error, suggesting that “html2canvas (…). Then is not a function”

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
rkshprbcommented, Oct 28, 2021

function Export() { alert("Hello! I am an alert box!! "); var element = document.getElementById(“page”);

//html2canvas(element, { logging:false}).then(function(canvas) {


 html2canvas(element, {
            onrendered: function (canvas) {


    var pdf = new jsPDF('p', 'mm', 'a4');//A4 paper, portrait
      var ctx = canvas.getContext('2d'),
       a4w = 190, a4h = 257,//A4 size, 210mm x 297mm, 10 mm margin on each side, display area 190x277
         imgHeight = Math.floor(a4h * canvas.width / a4w),//Convert pixel height of one page image to A4 display scale
         renderedHeight = 0;

    var logo = document.getElementById("logo");//Icon placed in header
    while(renderedHeight < canvas.height) {
      var page = document.createElement("canvas");
      page.width = canvas.width;
      page.height = Math.min(imgHeight, canvas.height - renderedHeight);//Maybe less than one page

      //Trim the specified area with getImageData and draw it into the canvas object created earlier
      page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
      //Add an image to the page with a 10 mm / 20 mm margin
      pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 20, a4w, Math.min(a4h, a4w * page.height / page.width));
      //Add header logo
      pdf.addImage(logo, 'PNG', 5, 3);

      renderedHeight += imgHeight;
      if(renderedHeight < canvas.height)
          pdf.addPage();//Add an empty page if there is more to follow

      delete page;
    }

    pdf.save('content.pdf');
    }
  });
    }
1reaction
niklasvhcommented, Jan 2, 2018
Read more comments on GitHub >

github_iconTop Results From Across the Web

html2canvas not working at all - Stack Overflow
Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is...
Read more >
TypeError: $(...).html2canvas is not a function - Drupal
Hi, I found TypeError: $(...).html2canvas is not a function while using html2canvas function in my custom jquery.
Read more >
How to use the html2canvas function in html2canvas - Snyk
To help you get started, we've selected a few html2canvas examples, ... const printElement = element => { html2canvas(element).then(function (canvas) ...
Read more >
html2canvas - Screenshots with JavaScript
Try out html2canvas. Test out html2canvas by rendering the viewport from the current page. Capture.
Read more >
Html2canvas Error : Uncaught TypeError: undefined is not a ...
Html2canvas Error : Uncaught TypeError: undefined is not a function ... I have used the below code to generate the screenshot of a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found