how to extract the snapshot using js

Question

$(function () {

    var specialElementHandlers = {
        '#editor': function (element,renderer) {
            return true;
        }
    };
 $('#cmd').click(function () {
        var doc = new jsPDF();
        doc.fromHTML($('#target').html(), 15, 15, {
            'width': 170,'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });  
});

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
"></script>
<script type="text/javascript" src="library/BlobBuilder.js"></script>

<script type="text/javascript" src="pdf.js"></script>
</head>
<body id="target">
  <div id="content">
    <h3>Hello, this is mathit app</h3>
    <a class="upload">Upload to Formulas</a> 
    <h2>This is <b>10th Std Notes</b> <span style="color:red"></span></h2> 
    <p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x.
Thus, P(x) = ax2 + bx + c =0,  R is known as the standard form of quadratic equation.


There are two types of quadratic equation.
(i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0.
(ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is equal to 0.
 </p>

  </div>
  <button id="cmd">generate PDF</button>
</body>

</html>

I have some code in pdf generater and i want to how to extract the snapshot using javascript for example user click the button the pdf and screen shot are generate and correct my programming code please help me.

score 0 · Answer 1 · edited May 23 '17 at 11:51

As explained in other answer you can use plugin html2canvas

Example as given on its website:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

As as explained in stackoverflow question

you can download that image as given below:

var dt = canvas.toDataURL('image/png');
  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
  dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');

  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
  dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

  this.href = dt;

that method not like that i want to snapshot from the page using javascript — prasanth p, Aug 17 '16 at 08:32
not a pdf convert div to image format ( like the jpack or png) — prasanth p, Aug 17 '16 at 09:22

how to extract the snapshot using js

1 Answers1