CODEWITHSUNDEEP
javascriptjqueryasp.net
Ram
Ram

Reputation: 565

How to take screenshot(image) in jQuery

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..

<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.

Upvotes: 0

Views: 13711

Answers (2)

Shaz
Shaz

Reputation: 11

This 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.

Upvotes: 1

Keng
Keng

Reputation: 1

try this

        html2canvas($("body"), {
             onrendered: function (canvas) {
                $("body").append(canvas);
             }
        });

and change your input type to button

Upvotes: 0

Related Questions