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
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").
May be useful.
Thanks !
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
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
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
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
This doesn't work for me @kchen1025
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()
});
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;
I think the right way to do the job is to use onclone
property, https://stackoverflow.com/a/51049443/2251303
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;