Uncaught (in promise) Provided element is not within a Document #1313

cjcortez · 2017-12-14T08:08:46Z

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

niklasvh · 2017-12-14T11:46:07Z

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

cjcortez · 2017-12-14T12:24:51Z

So how to fix this issue?

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

niklasvh · 2017-12-15T03:32:57Z

Please share an example on jsfiddle

RaghavPrabhu · 2017-12-15T10:28:23Z

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 · 2017-12-15T10:35:57Z

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

smartbepl · 2017-12-15T22:03:32Z

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

Digambarmalla · 2017-12-17T17:45:43Z

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 · 2017-12-18T06:18:25Z

@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 · 2017-12-26T05:46:38Z

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

m2shash · 2017-12-27T12:56:48Z

thanks it worked

lorkel · 2017-12-29T12:46:59Z

@jeremielodi Thank you, this was driving me nuts!

schrepel · 2018-01-05T20:57:38Z

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 · 2018-01-25T15:59:56Z

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 · 2018-01-26T13:34:07Z

@ikemike this can help you

<html>
<head>
  <title>html2canvas</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style type='text/css'>
   #test {
     height: 40px;
     width: 40px;
     border: 1px solid #001;
     background: red
   }
 </style>

</head>
<body>

  <div id='test' >
  </div>

  <img src='' alt='' id='img' />

  <script>
    html2canvas($('#test').get(0)).then(function (canvas) {
      var base64encodedstring = canvas.toDataURL("image/jpeg", 1);
      $('#img').attr('src', base64encodedstring);
    });
  </script>
</body>
</html>

bandacs · 2018-03-29T06:08:28Z

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

yihuiluo235 · 2018-04-13T07:58:44Z

ths，it works

leandrocgsi · 2018-05-09T12:49:10Z

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 · 2018-05-21T04:41:17Z

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

Uncaught (in promise): undefined error

impactcolor · 2018-09-28T19:24:07Z

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

impactcolor · 2018-09-28T19:31:17Z

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 · 2019-05-16T10:59:36Z

I have exactly the same issue that faced by #1313 (comment)
Can anyone found solution on this issue?

hhhluke · 2019-07-01T08:04:26Z

why i failed in cheerio?

 superagent
   .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 · 2019-11-10T20:23:12Z

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.

niklasvh added the Needs More Information label Dec 19, 2017

niklasvh closed this as completed Dec 21, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught (in promise) Provided element is not within a Document #1313

Uncaught (in promise) Provided element is not within a Document #1313

cjcortez commented Dec 14, 2017

niklasvh commented Dec 14, 2017

cjcortez commented Dec 14, 2017

niklasvh commented Dec 15, 2017

RaghavPrabhu commented Dec 15, 2017

Digambarmalla commented Dec 15, 2017 •

edited

smartbepl commented Dec 15, 2017

Digambarmalla commented Dec 17, 2017 •

edited

niklasvh commented Dec 18, 2017

jeremielodi commented Dec 26, 2017

m2shash commented Dec 27, 2017

lorkel commented Dec 29, 2017

schrepel commented Jan 5, 2018

ikemike commented Jan 25, 2018

jeremielodi commented Jan 26, 2018 •

edited

bandacs commented Mar 29, 2018

yihuiluo235 commented Apr 13, 2018

leandrocgsi commented May 9, 2018

joniel commented May 21, 2018 •

edited

impactcolor commented Sep 28, 2018

impactcolor commented Sep 28, 2018 •

edited

rashidhamid21 commented May 16, 2019 •

edited

hhhluke commented Jul 1, 2019

1der1 commented Nov 10, 2019

Uncaught (in promise) Provided element is not within a Document #1313

Uncaught (in promise) Provided element is not within a Document #1313

Comments

cjcortez commented Dec 14, 2017

niklasvh commented Dec 14, 2017

cjcortez commented Dec 14, 2017

niklasvh commented Dec 15, 2017

RaghavPrabhu commented Dec 15, 2017

Digambarmalla commented Dec 15, 2017 • edited

smartbepl commented Dec 15, 2017

Digambarmalla commented Dec 17, 2017 • edited

niklasvh commented Dec 18, 2017

jeremielodi commented Dec 26, 2017

m2shash commented Dec 27, 2017

lorkel commented Dec 29, 2017

schrepel commented Jan 5, 2018

ikemike commented Jan 25, 2018

jeremielodi commented Jan 26, 2018 • edited

bandacs commented Mar 29, 2018

yihuiluo235 commented Apr 13, 2018

leandrocgsi commented May 9, 2018

joniel commented May 21, 2018 • edited

impactcolor commented Sep 28, 2018

impactcolor commented Sep 28, 2018 • edited

rashidhamid21 commented May 16, 2019 • edited

hhhluke commented Jul 1, 2019

1der1 commented Nov 10, 2019

Digambarmalla commented Dec 15, 2017 •

edited

Digambarmalla commented Dec 17, 2017 •

edited

jeremielodi commented Jan 26, 2018 •

edited

joniel commented May 21, 2018 •

edited

impactcolor commented Sep 28, 2018 •

edited

rashidhamid21 commented May 16, 2019 •

edited