html2canvas promise returned before render complete

Created on 1 Oct 2019 · 3Comments · Source: niklasvh/html2canvas

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

[X] You are using the latest version
[X] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I have a page with several divs. Each of these divs has several react-table elements. I want to take a screenshot of each div and then create a zip file and download all of them at once (as a sort of pseudo powerpoint slide deck). This works perfectly on Mac, however when I'm using Google Chrome on Windows, the divs with several react tables seem to not finish rendering when the screenshot is taken. I've confirmed by turning on logging that the render completes in ~1000ms, but the canvas that html2canvas returns appears as though it didn't finish rendering. The react-tables are rendered, but the rest of the text on the page is somewhat transparent, as if it was halfway finished loading.

I don't have a jsfiddle repro quite yet, but I'll work on that to get one added here.

Specifications:

html2canvas version tested with:
Browser & version: latest Chrome - 77.0.3865.90
Operating system: Windows (important, can't reproduce on a Mac)

Source

tjchambers32

👍6

Most helpful comment

I also ran into this issue and it caused a pretty bad bug on our end. Would like fixed!

gregroyal on 12 Nov 2019

👍5

All 3 comments

I have been able to get this to work, though it's not optimal.

html2canvas(div, {
    letterRendering: true,
    onclone: (doc) => {
        // onclone logic to resize div

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 400)
        })
    }
}).then((obj) => {
    let img = obj.toDataURL()
    // save image to zip file
})

I came to the 400ms timeout through trial and error. Anything less, and I observed the issue with the div not being completely rendered when html2canvas takes the screenshot.

tjchambers32 on 2 Oct 2019

🚀2

I concur, I had a very similar issue, where images generated by Html2Canvas were being cut off. This only happened in production builds. In dev environments it worked fine. The work-around above resolves my issue. I do agree that it's not ideal, and a proper fix is needed for this, but for now it solves my problem. Thanks @tjchambers32 for this work-around.