我正在将div元素转换为图像或屏幕截图。我在整个互联网上进行搜索,并找到了有关html2canvas的信息。我尝试使用它,但没有运气。有谁知道如何使它工作?这是我的源代码。
<html>
<head>
<title> Screenshot </title>
</head>
<body>
<div id="container">
<h1> Screen shot me </h1>
</div>
<button onclick = "screenshot()"> Capture </button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas){
document.body.appendChild(canvas);
})
}
</script>
</html>
我的错误一直在说未捕获的TypeError:html2canvas(...)。则不是函数在截图在HTMLButtonElement.onclick。我错过了什么吗?
我使用Laravel 5.6和NPM。提前谢谢!
经过测试的Chrome,Firefox可以,IE 11需要添加2个额外的js库来支持promise。
function takeSnapShot() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.querySelector("#newCanvas").appendChild(canvas);
});
}
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>