HTML5 canvas get screenshot of a div is not working

Question

I'm trying to capture a div into an image using html5 canvas. Where I've a background image of that div so when trying to download the image in jpeg it is download without the background image. I'm sure I've that image in my domain so no way to break the same origin rule

HTML

<div id="testdiv" style="background:(path/to/image) no-repat">
</div>

JS

$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});

Why it's now drawing the background image of the div on canvas?

Any help? Thanks

Answer 1

您必须将css高度设置为div＃testdiv，例如：

<div id="testdiv" style="background:(path/to/image) no-repeat; height:700px"></div>