[英]html2canvas: taking screenshot of a div not working
我想使用 javascript 对 DOM 中的元素进行屏幕截图,并自动将其保存在我的本地计算机上,而无需在物理上单击按钮。 我看到了很多建议,但没有一个真正按照我想要的方式工作。 这是我读过的一些例子。 示例 1 , 示例 2
<!DOCTYPE html>
<html>
<body>
<script src="jquery-3.2.1.min.js"></script>
<p>This is some text.</p>
<div style="color:#0000FF" id="myContainer" >
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
<script type="text/javascript">
try {
debugger;
$.getScript("html2canvas.js", function() {
var takeScreenShot = function() {
html2canvas($("#myContainer"), {
onrendered: function (canvas) {
var tempcanvas=document.createElement("canvas");
tempcanvas.width=350;
tempcanvas.height=350;
var context=tempcanvas.getContext("2d");
context.drawImage(canvas,112,0,288,200,0,0,350,350);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL("image/png")
link.download = "myImage.png";
link.click();
}
});
} });
}
catch (err) {
alert(err.message);
}
</script>
</body>
</html>
问题是我没有收到错误,也没有截图。
您正在定义函数 takeScreenShot,但从未真正调用过它。 您需要使用takeScreenShot();
调用该函数takeScreenShot();
或更完整:
try {
debugger;
$.getScript("html2canvas.js", function() {
var takeScreenShot = function() {
html2canvas($("#myContainer"), {
onrendered: function (canvas) {
var tempcanvas=document.createElement("canvas");
tempcanvas.width=350;
tempcanvas.height=350;
var context=tempcanvas.getContext("2d");
context.drawImage(canvas,112,0,288,200,0,0,350,350);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL("image/png")
link.download = "myImage.png";
link.click();
}
});
}
takeScreenShot();
});
}
catch (err) {
alert(err.message);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.