javascript - HTML5 Canvas 获取 div 的屏幕截图不起作用

Question

我正在尝试使用 html5 Canvas 将 div 捕获到图像中。我有那个 div 的背景图片，所以当我尝试下载 jpeg 格式的图片时，它是在没有背景图片的情况下下载的。我确定我的域中有该图像，因此无法打破同源规则

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);
        }
    });
});

为什么它现在在 Canvas 上绘制 div 的背景图像？

有什么帮助吗？谢谢

Answer 1

您必须将 css 高度设置为您的 div#testdiv，例如:

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