2

is there anyway to solve this issue? The html2canvas is not rendering when the document.body height is more than 30,000 pixels. Or can i render the current viewport only? On what the user can see?

Please help.

Kel
  • 55
  • 3
  • 12
  • 1
    You can add `type:'view'` in html2canvas initialization options to render only the active viewport – Amr Labib Oct 23 '17 at 04:40
  • @AmrLabib you can probably add this as an answer (except if you know a good duplicate). Just for info: https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element – Kaiido Oct 23 '17 at 04:47
  • I already add the type:'view' but when i scroll down it still rendering whats on the top of the page.. – Kel Oct 23 '17 at 04:55

1 Answers1

2

To be able to render only current active viewport you can initialize html2canvas with type:'view' option

example:

 var body = document.getElementsByTagName("body")[0]; 
    html2canvas(body, {
        type: 'view',
        onrendered: function(canvas) {
            //implementation
        }
    })

I tested the above code with html2canvas version 0.5.0-beta4 and it capture only the current viewport correctly, even if you scroll to the bottom of the page

Regarding 30,000 pixels, you can check the answer mentioned by @kaiido

Amr Labib
  • 3,995
  • 3
  • 19
  • 31
  • What if my page is 40,000 pixels does it still work ? – Kel Oct 23 '17 at 05:03
  • Yes i just tested it again with 40,000 pixels body and scrolled to the bottom, it's capturing only the bottom active viewport – Amr Labib Oct 23 '17 at 05:07
  • Sir can i ask how to download the html2canvas version 0.5.0-beta4 because i downloaded html2canvas.js https://github.com/niklasvh/html2canvas/releases here but theres an error saying "Uncaught (in promise) TypeError: this.getChildren is not a function"..thanks – Kel Oct 23 '17 at 05:09
  • Just use `npm install html2canvas` it will download the latest version which is `0.5.0-beta4` – Amr Labib Oct 23 '17 at 05:12
  • Okay sir ill try it. Ill ask you later or tomorrow – Kel Oct 23 '17 at 05:32
  • sir i already downloaded the html2canvas should i import all the files ? html2canvas.js html2canvas.min html2canvas.svg html2canvas.svg.min – Kel Oct 23 '17 at 05:41
  • you just need this file `node_modules/html2canvas/dist/html2canvas.js` if you have issues downloading the package you can just add it to your page from cdn https://cdnjs.com/libraries/html2canvas/0.5.0-beta4 – Amr Labib Oct 23 '17 at 05:44
  • can i use the latest html2canvas.js in feedback.js? – Kel Oct 23 '17 at 05:58