How to take screenshot(image) in jQuery

Question

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.

http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with-javascript This might be of interest — auo, Apr 07 '14 at 07:30
possible duplicate of [How to take screen shot of current webpage using javascript/jquery](http://stackoverflow.com/questions/18231259/how-to-take-screen-shot-of-current-webpage-using-javascript-jquery) — Karim AG, Apr 07 '14 at 07:38
Good article here: http://www.jquerybyexample.net/2013/08/take-webpage-screenshot-html5-jquery-javascript.html — adripanico, Apr 07 '14 at 08:06

score 1 · Answer 1 · edited Apr 29 '16 at 15:31

1

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.

edited Apr 29 '16 at 15:31

invot

533
7
30

answered Apr 08 '15 at 09:08

Shaz

11
1

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Apr 08 '15 at 09:12

score 0 · Answer 2 · answered Sep 16 '14 at 11:33

0

try this

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

and change your input type to button

answered Sep 16 '14 at 11:33

Keng

1

How to take screenshot(image) in jQuery

2 Answers2