[英]why doesn't rendering image work
Following the example from this html2canvas example , I am trying to make it possible to turn the content from textarea into an image. 在此html2canvas示例的示例之后 ,我试图将其内容从textarea转换为图像。
The following code doesn't work. 以下代码不起作用。 With the textarea containing <h2>Hi you</h2>
, clicking "to image" button produces an empty image. 在文本区域包含<h2>Hi you</h2>
,单击“显示图像”按钮将生成一个空白图像。 Interestingly, if I change the first line in function takeScreenShot
to be document.getElementById("target").innerHTML = "<h2>you</h2"
, then the image is produced. 有趣的是,如果将函数takeScreenShot
的第一行更改为document.getElementById("target").innerHTML = "<h2>you</h2"
,则生成图像。 Wonder why. 想知道为什么。
<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>
I removed the width
and height
properties and got it to work. 我删除了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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.