Partial Snapshot of a Web Page Using HTML2canvas

Introduction

Any web page would consist of multiple UI components like header, footer, left menu, multiple contents, etc. When I say partial snapshot, I meant snapshot of one or more specific page content like a specific graph or chart appearing on the main page, a table, etc.

Background

Sometimes, we may have a business requirement of allowing print of a specific page content, copy the page content in a mail and send to recipient, etc. it is usually easier to find code to take the screen shot of the complete page which often includes unwanted content like left menu, headers, etc. But it is difficult to figure out the code which can allow partial snapshot (at least I found it difficult when trying to implement this requirement in my application). This blog would help in writing a generic piece of code which can be used in multiple scenarios related to partial snapshot.

Using the Code

The key is the JavaScript library html2canvas. We need to add the reference to this file wherever we need the functionality of partial snapshot. If the requirement is for all the pages, then simply add the reference in some master file.

The basic principle is to partially convert the html into a canvas html control and then use it for requested functionality.

<script type="text/javascript" src="Scripts/html2canvas.js"></script>

Next, I would show the sample code of capturing snapshot. This sample code is supposed to be executed on page load, but we can easily bind it to a button click event as well.

 <script language="javascript">
        $(document).ready(function () {
            html2canvas($("#testdiv"), {
                onrendered: function (canvas) {
                    var extra_canvas = document.createElement("canvas");
                    extra_canvas.setAttribute('width', 300);
                    extra_canvas.setAttribute('height', 300);
                    var ctx = extra_canvas.getContext('2d');
                    ctx.drawImage(canvas, 0, 0, 300, 300, 0, 0, 300, 300);
                    var myImage = extra_canvas.toDataURL("image/png");
                    document.getElementById("img").src = myImage;
                    $("[id*=hfImageData]").val(myImage);
                    window.open(myImage);
                }
            });
        });
</script>

This piece of code can be made generic and be written in some common JavaScript file to be used across the application or you may copy this piece of code in a specific file and use it. Logic would be the same in every case. Only the div id and dimension of image would change.

So just with these few lines of code and a reference to htmltocanvas js file, we can implement this typical functionality.

• Line 2: Ensures that code would be executed on page load. This can be easily replaced with a button click event as follows:

$(document).ready(function () { 

$('#button').on("click", function () {            
captureSnapshot(); 
}); 

function captureSnapshot () {…….}

Usage of Images Bytes in Hidden Field

We are not over yet. There is more. I have shown above that we can get the image in a bytes array in a hidden field. We can store this hidden field value in database and use it later as well for some audit, snapshot, etc.

Please see the sample code below for accessing the hidden field and converting it to bytes array

This is the additional functionality which can be achieved in association to the html to canvas code. I personally feel this is a very good addition to the core logic if used properly.

This is all you need to know to implement this partial snapshot functionality. I hope this would be useful for you in your work.

References

• http://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas

History

• 6^th June, 2016: Initial version