I have a graph displayed in form of Asp .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..
<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.
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..
<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.
I have a graph displayed in form of Asp .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..
<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.
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..
<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.
Share Improve this question edited Feb 18, 2016 at 21:57 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked Apr 7, 2014 at 7:27 RamRam 5657 gold badges16 silver badges28 bronze badges 3- stackoverflow./questions/6887183/… This might be of interest – auo Commented Apr 7, 2014 at 7:30
- possible duplicate of How to take screen shot of current webpage using javascript/jquery – Karim AG Commented Apr 7, 2014 at 7:38
- Good article here: jquerybyexample/2013/08/… – adripanico Commented Apr 7, 2014 at 8:06
2 Answers
Reset to default 1This can be achieved by using the jQuery plugin "html2canvas" which you can read about here.
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.
try this
html2canvas($("body"), {
onrendered: function (canvas) {
$("body").append(canvas);
}
});
and change your input type to button
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745493515a4630091.html
评论列表（0条）