FeedBackis 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:
You can download html2canvas and html2canvas jQuery plugin fromthis link. Note: The source link contains html2canvas v0.40. I recommend you to check for a newer version and use it instead fromofficial html2canvas site.
I have used jquery.min.js v1.7.1 but you can try other versions. For this jQuery library, usethis link. Here’s first lines of code:
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:
<!-- Render your page inside of this div. -->
<inputtype="submit"value="Take Screenshot Of Div"onclick="capture();"/>