html2canvas 呈现空白图像

Question

我第一次尝试使用 html2canvas 将我的 html 元素转换为图像。但是，它会呈现空白图像。这是一个复制器：

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">to image</button>

const div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
 
window.takeScreenShot = function() {
    html2canvas(div, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}

jsfiddle

以某种方式移除目标 div，它可以正确呈现。知道我做错了什么吗？

编辑：我可以在这里看到许多解决方法，我自己也发现了一些。我想了解的是为什么会发生这种情况，以便避免在我的应用程序中出现此类问题？

Answer 1

删除宽度和高度 - 让 html2canvas 自己决定 canvas.

的尺寸

已更新 fiddle：http://jsfiddle.net/jyhw02a7/1/

const div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
 
window.takeScreenShot = function() {
    html2canvas(div, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
            console.log(canvas);
        }
});

}

#target{
    width:300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA==" crossorigin="anonymous"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">to image</button>

Answer 2

2020 年 10 月 23 日更新：问题是脚本前有一个 div with id="target"。如果重命名，则 jsfiddle 将成功运行。似乎有什么东西（可能在 jsfiddle 中）暂时使用了 id“target”并且选择了错误的东西。（将带有 id 目标的 div 移动到脚本下方也有效，可能是因为临时目标会首先在 DOM 中找到）。

进行了多次调试尝试，并将信息保留在此处，因为答案在没有上述段落的情况下被接受并且为了完整性。

如果 div（具有

同理，id为target的div也可以成功放到canvas上。

所以这会起作用：

<div id="div"><h1>asd</h1></div> 

window.takeScreenShot = function() {
    html2canvas(document.getElementById('div), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}

（这不是假装是一个完整的答案，但评论太长了）

更新：我离开了 jsfiddle，而是自己放了一个完整的例子 space 所以我知道没有其他事情发生。在上查看它似乎有效。

这是完整的代码。似曾相识？这是问题的代码，没有额外的东西（例如，jsfiddle 必须放入的东西或调用的其他库）

让我们在片段中尝试一下

<!DOCTYPE html>
<html>
<!--  -->
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
let div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
 
function takeScreenShot() {
    html2canvas(div, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
</script>
</body>
</html>

此外，如果将完整的文档放入 jsfiddle 的 HTML 部分，JS 部分没有任何额外内容，它就可以工作。所以 jsfiddle 可能是无罪的，它是其他一些库中的东西正在干扰......继续......

html2canvas 呈现空白图像

html2canvas renders blank image

html

javascript

css

html2canvas

删除宽度和高度 - 让 html2canvas 自己决定 canvas.