13

I was trying to take screen shot of a web page using JavaScript/JQuery. Could you please explain me the code steps I need to follow?

Kara
  • 6,115
  • 16
  • 50
  • 57
user2682340
  • 139
  • 1
  • 1
  • 3
  • 1
    Possible duplicate of [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – Zach Saucier Sep 10 '16 at 15:41

3 Answers3

15

The html2canvas2 JavaScript utility is suitable to take a screenshot of a webpage. You have to use three JavaScript libraries: 

 1.jquery-1.10.2.min.js
 2.html2canvas.js
 3.jquery.plugin.html2canvas.js

Then call the function capture(), which will give you an HTML5 canvas-based screenshot in new window. It also generates a base64data value of image. It only works in browsers that support HTML5 canvas.

    <script type="text/javascript">
    function capture() {
            html2canvas($('body'),{
                onrendered: function (canvas) {                     
                            var imgString = canvas.toDataURL("image/png");
                            window.open(imgString);                  
            }
        });
   </script>
L0j1k
  • 12,255
  • 7
  • 53
  • 65
Edward
  • 196
  • 1
  • 4
  • Hi.. Can you please share the right source repo too if possible?.. I can find few while googling. – Roy M J Jan 10 '14 at 08:43
  • I've added a link to the library in this answer. – L0j1k Jun 11 '14 at 04:33
  • 3
    **Important note:** "The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page." – Brad Aug 12 '15 at 02:16
  • 3
    where is this image saved. how can i view it? – Sujit.Warrier Jan 25 '17 at 05:39
0

Here, Take screenshot of webpage using html2canvas.

Example

<!doctype html>
<html>
 <head>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
 </head>
 <body>
  <h1>Take screenshot of webpage with html2canvas</h1>
  <div class="container" id='container'>
      <h1>Devnote is a tutorial.</h1>
  </div>
  <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

  <!-- Script -->
  <script type='text/javascript'>
    function screenshot() {
        html2canvas(document.body).then(function(canvas) {
            document.body.appendChild(canvas);
        });
    }
  </script>

 </body>
</html>

Output:

enter image description here

Fefar Ravi
  • 794
  • 7
  • 18
0

If you want real screenshot and not to convert html to image then you can try my new JS library: screenshot.js.

It's enable to take real screenshot.

You load the script:

<script src="https://raw.githubusercontent.com/amiad/screenshot.js/master/screenshot.js"></script>

and take screenshot:

new Screenshot({success: img => {
        // callback function
        myimage = img;
    }});

You can read more options in project page.

amiad
  • 478
  • 2
  • 7