Html2canvas: Uncaught (in promise) Provided element is not within a Document

[cjcortez]

What is the meaning of this error? and how to fix it

[niklasvh]

The element you are trying to render is not within the Document DOM

[cjcortez]

So how to fix this issue?

0.5 is fine but when I upgrade to 1 I got this error

[niklasvh]

Please share an example on jsfiddle

[RaghavPrabhu]

I have tried to load the html2canvas js (version 1) and my app js after the HTML body and this issue got fixed for me.

[Digambarmalla]

Does anyone got a fix for this issue, I have the same problem while using in ASP.Net MVC cshtml page.

[smartbepl]

If you use jQuery to find DIV use
html2canvas($("#element")[0]).then(function(canvas) {
$("#element-out").append(canvas);
});

[Digambarmalla]

But I am unable to take image of google map using html2canvas(all map image is not coming), Can anyone help me out how to do the same in cshtml ???

[niklasvh]

@cjcortez @RaghavPrabhu does smartbepl's solution above fix it for you presuming you are using jQuery or some other library that provides a list of elements instead of a single Element?

[jeremielodi]

This works for me!
html2canvas($('#div').get(0)).then( function (canvas) {
console.log(canvas);
});

[m2shash]

thanks it worked

[lorkel]

@jeremielodi Thank you, this was driving me nuts!

[schrepel]

I tried code similar to the above, but maybe the error I'm getting isn't quite related: Uncaught (in promise) undefined... Promise rejected (async)

[ikemike]

I was having the exact same problem - I wanted to call HTML2Canvas on button click. No matter how I wrote the HTML2Canvas call, I would get an "Uncaught (in promise) undefined...Promise rejected (async)" error. Finally, I learned a little bit about how promises work and found the solution was adding a catch:

function myFunction() {
    html2canvas(document.querySelector("#capture")).then(canvas => {          
            var base64encodedstring = canvas.toDataURL("image/jpeg", 1).replace("data:image/jpeg;base64,", "");
            j$("[id$='inputHidden']").val(base64encodedstring);
            console.log('Saving...');
            mySaveFunction();
        })
        .catch(function (error) {
            /* This is fired when the promise executes without the DOM */    
        });
}

Word of warning, I'm a total javascript novice and understand very little about how promises work. My code worked fine without the .catch() if I used it outside of a function. I'm assuming that somehow, when you encapsulate it, it no longer has the correct DOM access and the promise fails.

[jeremielodi]

@ikemike this can help you
```html

[bandacs]

@niklasvh with latest version of html2canvas I am getting Uncaught (in promise): undefined error. Can you please help me.

[yihuiluo235]

ths，it works

[leandrocgsi]

This works fine for me:

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    clearDynamicLink(link); 
}

function DownloadAsImage() {
    var element = $("#table-card")[0];
    html2canvas(element).then(function (canvas) {
        var myImage = canvas.toDataURL();
        downloadURI(myImage, "cartao-virtual.png");
    });
}

[joniel]

in chrome, it works fine, but in IE11, doesn't work... T_T;

Uncaught (in promise): undefined error

[impactcolor]

@bandacs did you find a solution to this? I'm getting exact error as your screen shot.

[impactcolor]

I'm using 1.0 alpha 12 release and I'm having the same problem. I've tried all of these solutions.

I've tried this solution by @smartbepl
html2canvas($("#element")[0]).then(function(canvas) {
$("#element-out").append(canvas);
});

I tried this by @jeremielodi
html2canvas($('#div').get(0)).then( function (canvas) {
console.log(canvas);
});

I also tried leandrocgsi solution and tried adding a catch as @ikemike suggest.

To simplify it and ensure all elements are loaded on the DOM, I place a function called take_screenshot().

function take_screenshot()
{
html2canvas($(".image__container")[0]).then(canvas => {
console.log('please work I am loosing my mind');
});
}
I then call take_screenshot() directly from the javascript console to ensure everything loaded.
I get the same error Uncaught (in promise) undefined.

[rashidhamid21]

I have exactly the same issue that faced by https://github.com/niklasvh/html2canvas/issues/1313#issuecomment-377132089
Can anyone found solution on this issue?

[dryqiao]

why i failed in cheerio?

   .get(url)
   .end((err, res) => {
       cheerio.load(res.text)
       html2Canvas($('#statuses').get(0), {
           allowTaint: true
       }).then(function(canvas) {})
})
Uncaught (in promise) Error: Element is not attached to a Document

[1der1]

There is another calling convention now.
Version 0.5 expected the node in an array, while you now give it directly.
Version 0.5 had the "onrendered" option, while you now use the "then" construct.