Html2canvas: Screenshotting DIV Getting Blank Image

[RedRaptor10]

Bug reports:

Hi I am a bit new to html2canvas. I am using html2canvas on WordPress. I want to be able to let users click on a button which will take a screenshot of a DIV. However, the screenshot appears to be blank even though it has the correct size. I can get it to screenshot the entire page, but not for divs. At one point I was able to get it to work in JSFiddle, but now I can't seem to get it to work anymore. Here is my code:

<div id="test" style="display: inline-block; background: yellow; width: 100px; height: 100px;"></div>
<button onclick="printImage()">save</button>

<script>
function printImage() {
var element = document.getElementById("test");
html2canvas(element).then(function(canvas) {
    var base64image = canvas.toDataURL("image/png");
    window.open(base64image , "_blank");
})
}
</script>

jsfiddle:
https://jsfiddle.net/o4s8zfpL/

Next:
Once that problem is solved, I want to be able to snapshot multiple images on top of each other inside a div. I am currently able to drag/drop images around. My goal is to place all of this inside a div and be able to snapshot the div. I am just leaving this here in case there are any issues with this and html2canvas in the future.

Specifications:

Version: v1.0.0-rc.5
Browsers: Firefox 70.0.1 (Also tested with Chrome/Edge)
Operating System: Windows 10

[RedRaptor10]

Wow! After hours of looking online and playing around with my code I was able to figure it out. I believe the reason why the rendered image is blank is because html2canvas takes a screenshot of the entire canvas and the div is actually offscreen of the screenshot. To fix this, I had to set the options for html2canvas. My working code is:

<div id="element" style="display: inline-block; background: yellow; border: 1px solid red; width: 100px; height: 100px;"></div>
<button id="saveImage">save</button>

<script>
window.onload = function() {
var saveImage = document.getElementById("saveImage");
saveImage.addEventListener('click', function () {
var e = document.getElementById("element");
var e_width = e.offsetWidth;
var e_height = e.offsetHeight;
var e_x_offset = window.scrollX + e.getBoundingClientRect().left;
var e_y_offset = window.scrollY + e.getBoundingClientRect().top;
html2canvas(e, {
    scale: 1,
    width: e_width,
    height: e_height,
    x: e_x_offset,
    y: e_y_offset
    }).then(canvas => {
    var base64image = canvas.toDataURL("image/png");
    var win = window.open('', "_blank");
    win.document.write('<img src="' + base64image + '"/>');
    win.document.close();
});
});
}
</script>

After setting the scale, width, height, x and y of the canvas that was screenshotted I was able to successfully view the div element in the new window.

Side note: Unfortunately the resulting image was partially cut off, so I had to manually adjust it and add "+ 9" to the e_x_offset through trial and error to get it to be positioned correctly. You may have to play with this yourself depending on the image. Additionally, I had to use addEventListener for the save image button, and I had to call window.open before actually writing to it and then close it.

Hopefully this helps anyone else who is having the same problem that I was.

[gokhancetiner]

Thanks a lot, you saved my time to solve my problem

[Heshiyu1996]

I met the same problem with you, thank you ！！

[polymorpher]

@RedRaptor10 Thanks for the solution. I wish they add your example to the official documentation.

[beyondtheinferno]

Thank you for the solution @RedRaptor10. Real helpful. Seconding the notion for this to be on the documentation.