為什么渲染圖像不起作用

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