Screenshot a HTML Page from Java Script

Screenshot a HTML Page from Java Script

Say, I have a Web page with beautiful graphs and charts. I want that to be
saved as an Image. Simply to state, take a screen shot of the HTML document from Java Script .

The Solution mentioned below worked for me

http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/

See the Following code available in paste bin.

http://pastebin.com/chb67wgr

1. Require a Target <div>, where those contents are going to be converted as Image

2. Require the 3 JavaScript Files

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='http://kubilayerdogan.net/screenshot/js/html2canvas.js'></script>
<script type='text/javascript' src='http://kubilayerdogan.net/screenshot/js/jquery.plugin.html2canvas.js'></script>

3. On the Click Event,

function capture() {
        $('#target').html2canvas({
            onrendered: function (canvas) {
                $('#img_val').val(canvas.toDataURL("image/png"));
                var d=(canvas.toDataURL("image/png"));
               document.getElementById("result").src=d;
               }
        });
    }
Simply the <div> (id: target) tag contents are converted to Canvas.
4. Convert Canvas to Raw Image ( toDataURL()) will do
5. Load the Raw Image in the <img> tag. Note that in this example, "result" is the id of the <img> Tag. If you try with  <div> tag, it will not work.

To load the Raw Image, I referred the following URL.

http://stackoverflow.com/questions/22539999/how-to-display-raw-image-data-with-html-and-javascript

a Sample is available in JSFiddle

http://jsfiddle.net/bYGum/