javascript 如何在 jQuery 中截取屏幕截图（图像）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22906035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to take screenshot(image) in jQuery
提问by Ram
I have a graph displayed in form of Asp.net .apsx page. Now as per my requirement I have to save this form content as image in my system on button click. Here is my .aspx code..
我有一个以 Asp.net .apsx 页面形式显示的图表。现在根据我的要求，我必须在单击按钮时将此表单内容保存为系统中的图像。这是我的 .aspx 代码..
<form id="form1" runat="server">
<div style="padding-left:150px">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>
In this code a chart will be displayed. So I want to capture that chart as screenshot image in my system.How to do this in jQuery.. Please help.
在此代码中，将显示一个图表。所以我想在我的系统中将该图表捕获为屏幕截图图像。如何在 jQuery 中执行此操作.. 请帮助。
Here is the code in jQuery that i am trying to use to get the image in variable but button click event in jQuery is not getting fired..
这是 jQuery 中的代码，我试图用它来获取变量中的图像，但 jQuery 中的按钮单击事件没有被触发。
<script type="text/javascript">
function capture() {
$('#form1').html2canvas({
onrendered: function (canvas) {
alert("Hii");
var img_val;
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("form1").submit();
alert("Hii");
}
});
}
</script>
<body>
<form id="form1" runat="server">
<div style="padding-left:150px">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>
<input type="submit" value="Take Screenshot Of Div" onclick="capture();" />
</body>
Please help me.
请帮我。
回答by Shaz
This can be achieved by using the jQuery plugin "html2canvas" which you can read about here.
这可以通过使用 jQuery 插件“html2canvas”来实现，你可以在这里阅读。
It's usage is pretty simple:
它的用法非常简单：
html2canvas(element, {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
$('#myImage').val(canvas.toDataURL("image/png"));
$("#myForm").submit();
}
});
There are limitations to this script. It does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM. This means some CSS properties and SVG elements will likely not render properly.
此脚本存在限制。它实际上并没有截取页面的屏幕截图，而是根据它从 DOM 读取的属性构建它的表示形式。这意味着某些 CSS 属性和 SVG 元素可能无法正确呈现。
回答by Keng
try this
试试这个
html2canvas($("body"), {
onrendered: function (canvas) {
$("body").append(canvas);
}
});
and change your input type to button
并将您的输入类型更改为按钮
