为什么渲染图像不起作用

Question

在此html2canvas示例的示例之后，我试图将其内容从textarea转换为图像。

以下代码不起作用。 在文本区域包含<h2>Hi you</h2> ，单击“显示图像”按钮将生成一个空白图像。 有趣的是，如果将函数takeScreenShot的第一行更改为document.getElementById("target").innerHTML = "<h2>you</h2" ，则生成图像。 想知道为什么。

<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

</head><body>
<!-- from http://jsfiddle.net/alperenozlu/sodofkcs/ -->
<textarea cols="80" rows="15" id="input">
</textarea><br/>
<div id="target">
    Lorem ipsum dolor sit amet.
</div>

<button onclick="takeScreenShot()">to image</button>
<script>
takeScreenShot = function() {
    document.getElementById("target").innerHTML = document.getElementById("input").value;
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
</script>
</body></html>

Answer 1

我删除了width和height属性，并使其正常工作。

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <!-- from http://jsfiddle.net/alperenozlu/sodofkcs/ --> <textarea cols="80" rows="15" id="input"> </textarea><br/> <div id="target"> Lorem ipsum dolor sit amet. </div> <button onclick="takeScreenShot()">to image</button> <script> takeScreenShot = function() { document.getElementById("target").innerHTML = document.getElementById("input").value; html2canvas(document.getElementById("target"), { onrendered: function(canvas) { document.body.appendChild(canvas); } }); } </script> </body> </html>

为什么渲染图像不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-05-28 22:11:28

为什么渲染图像不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-28 22:11:28

解决方案1
1 已采纳 2018-05-28 22:11:28