我开发了一个包含文本的简单div元素。
我试图使用html将PNG转换为html2canvas，并将其作为另一幅图像中的图像输出。在我的本地服务器上运行它时，基于console.log成功初始化Rendering
118ms html2canvas: Canvas renderer initialized (1350x18 at 8,8) with scale 1
但输出图像不会附加到指定的div元素中。
任何帮助将非常感激！
JAVASCRIPT
function myFunction () {
html2canvas(document.getElementById("hi"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
document.getElementById("img-out").append(canvas);
}
});
}HTML
<html>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<body onload="myFunction()">
<div id ="hi">
Hi There !
</div>
</br></br></br></br></br></br>
<div id="img-out"></div>
</body>
</html>
您可以将画布作为图像源并在页面上显示图像。请注意，如果您使用的是最新版本的html2canvas库，则不推荐使用'onrendered'功能。请改用以下脚本
function myFunction (){
html2canvas(document.querySelector("#hi")).then(canvas => {
document.body.appendChild(canvas);
var img = document.createElement("img"); // create an image object
image.src = canvas.toDataURL(); // get canvas content as data URI
document.getElementById('img-out').appendChild(image);
});
}