Thursday, June 6, 2013

html2canvas- Take Screenshot of Web Page and Save It to Server (Javascript and PHP


FeedBack is important. Usually, end-users struggle to clarify their problems. And you might be unreachable for a phone call or remote connection.
That causes a huge need of visualization. First solution that appears in mind is to capture the current screen of user.
However, when I tried to implement that, it wasn’t so easy as I expected. Some old ways offer ActiveX but it seems too outdated. Since there’s a bridge needed between client side and server, JS libraries are the best way.
There’s a great library, html2canvas. It is told to be reverse-engineered version of Google Plus’ way of taking screenshots.
When I first discovered this library, it took me a while to use for simplest implementation. I just wanted to visualize a div element. However, there was no single page to tell the whole path to follow, thus I had to combine various sources.
Here’s how you can easily use for taking a screenshot of a div:
1- Import libraries
There are 3 libraries to import:
  • jquery.js
  • html2canvas.js
  • jquery.plugin.html2canvas.js
You can download html2canvas and html2canvas jQuery plugin from this link.
Note: The source link contains html2canvas v0.40. I recommend you to check for a newer version and use it instead from official html2canvas site.
I have used jquery.min.js v1.7.1 but you can try other versions. For this jQuery library, use this link.
Here’s first lines of code:
1
2
3
4
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<!-- -->
2- Create your div
In my code, I used html2canvas for a div. You can use the whole body tag instead, it’s up to you.
Attach a div element to the page with a certain id:
1
2
3
<div id="target">
<!-- Render your page inside of this div. -->
</div>
3- Create a button and a hidden form
This part is important. In order to save the image to server, we need to pass captured image data with a form field.
In 4th step, you’ll see JavaScript code that writes the image data to hidden field and posts the form.
1
2
3
4
<input type="submit" value="Take Screenshot Of Div" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>
4- JavaScript Code
1
2
3
4
5
6
7
8
9
10
function capture() {
    $('#target').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}
5- Use the posted values
Here I used a form to post the value. You can use Ajax calls or whatever. I have a PHP file, save.php. In this file, we will both show the picture and save it to the server.

<?php
$LgPath=$_POST['img_val'];

        header("Content-Transfer-Encoding: binary");
        header("Content-Type: image/png");
        header("Content-Disposition: attachment; filename=custom-img.png");
        //start feeding with the file
readfile($LgPath);

8 comments:

  1. IT is not supporting CSS3 rotation .
    any help

    ReplyDelete
  2. HI , i was trying to resolve this issue,but till not working if whn it complete . i ll let you know later.
    thank for informing this issue.

    thanks

    ReplyDelete
  3. Hi, we have developed usersnap to solve this problem. Feel free to try it. http://usersnap.com.
    full disclosure: I'm one of the co founder!

    ReplyDelete
  4. html2canvas throwing security exception while trying to capture google map

    ReplyDelete
  5. I have used GrabzIt's JavaScript API (http://grabz.it/api/javascript/) to do this in the past it is simple to use and fast.

    ReplyDelete
  6. iT'S WORKING fine but they connot work if the content of div came from database.., any body who can help me..?

    ReplyDelete
  7. Thanks for sharing. I hope it will be helpful for too many people that are searching for this topic.java training

    ReplyDelete