Html2canvas: Not able to get contents of divs with "display:none"

Created on 6 Mar 2016 · 10Comments · Source: niklasvh/html2canvas

Hi I want to take screen shot of a div which is hidden

this is the code I tried
HTML:

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS:

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

Error in Browser:
**

Uncaught TypeError: Cannot read property 'length' of nullhtml2canvas @ html2canvas.js:941(anonymous function) @ HtmlPage.html:13

**
My fiddle:https://jsfiddle.net/h39tp0Ly/2/

Please help me out with this

Source

Spartan-Arun

Most helpful comment

Hello, I'm working with Angular 6 and "html2canvas" to create a PDF with "jsPdf" .... I wanted to take a screenshot to a hidden div and I could not do it until I ACHIEVE it

the capture is made to the div with id "html-pdf"

"HTML"
` Student Card /a>

div id = "pdf" *ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">

/div
/div`

"js or in angular is Typescript"
`download2 () {
var imgcab: string;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {scale:2}). Then (function (canvas) {

var img = canvas.toDataURL ("image / png", 1);

var doc = new jsPDF ({
orientation: 'p',
unit: 'mm',
format: 'letter',
});

doc.addImage (img, 'PNG', 2,2,212,272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save ('testCanvas.pdf');
});`

And the most important thing to hide the div inside the screen.

"CSS"
#pdf { overflow: hidden; height: 0; }

the code creates a pdf with the capture of the div "html-pdf" that is inside the hidden div "pdf" ...

I hope you serve them

I wrote this in Spanish and it is translated, from Chile;

kuraudeo on 27 Jul 2018

👍14 ❤11

All 10 comments

Html2canvas interprets the display:none style correctly and thus will not render a hidden element. To accomplish what you want, you can absolutely position a visible element off of the page viewport (if the desire is to "render a hidden element").

herringtown on 11 Mar 2016

May be useful.
Thanks !

atefBB on 27 Sep 2016

It works if and only if the div has css which is not "display:none". so i used .show() and .hide() combination to make the element visible and hidden to form Canvas

Spartan-Arun on 4 Jan 2017

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

I found some info on Internet. We can set css to specified div with "display:none" then add option onclone like above. Plz add option "loggin: true" to see what happen

karsondang on 23 Jan 2017

Actually the trick of putting container out of a viewport with position absolute and top/left negative values - does not work in Firefox, it throws NS_ERROR_FAILURE exception

It works though in Chrome

nettiopsu on 14 Feb 2018

I ran into this issue very recently, and if you want a particular div to be invisible and screenshotted, set the css properties as

height: 0%
overflow:hidden

kchen1025 on 7 Jun 2018

😕5 👎2 👍2

This doesn't work for me @kchen1025

chidiwilliams on 14 Jul 2018

I ended up generating the canvas immediately after the target div, and then hiding the div immediately after the canvas was loaded. The flicker is barely noticeable.

My code looks like this:

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});