Recently, I was to implement a web application requirement that the screenshot of a web page containing sketches done by users be captured, as the image is being saved. While this may seem trivial, a lot of intricacies is involved in building an image representation of the page as it is shown on the browser.
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.
Html2canvas.js is a JavaScript library that provides functionality for capturing a screenshot; the screenshot is built based on the information available on the page. The script traverses the DOM and builds a representation of the page alongside the images and the CSS styles present on the page, but it doesn’t render flash, java applets, and iframe. The html2canvas library can be downloaded here.
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 have how you can easily use for taking a screenshot of a div. There are three libraries to import:
jquery.js
html2canvasjs
plugin.html2canvas.js
It uses the jQuery plugin HTML2Canvas that converts a given page section to a graphic image on HTML5 canvas element and submits the captured image data to the server via AJAX. The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page but builds a representation of it based on the properties it reads from the DOM.
I need to convert entire div to image and save to our server in my web application. So I do provide some code below for your understanding purpose.
HTML code for Div which we have to capture as an image.
Note: The source link contains html2canvas v0.40. I recommend you to check for a newer version and use it instead from the official html2canvas site.
Now add below script to convert your entire Div to an image.
<script>
html2Canvas[document.getElementById('mainDiv')],{
onrendered: function (canvas){
var imagedata = canvas.toDataURL('image/png');
var imgdata =imagedata.replace(/^data:image\/(png|jpg);base64,/,"") ;
//ajax call to save image inside folder
$.ajax({
url: 'save_image.php',
data:
{
imgdata:imgdata
},
type: 'post',
success: function (response){
console.log(response);
$('#image_id img').attr('src' , response);
}
});
}
}
</script>
To save Div as an Image file.
$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(),true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'].'/uploads/'.$filename.'.png';
$imageurl = 'https://example.com/uploads/'.$filename.'.png';
file_put_contents($file,$imageurl);
echo $imageurl;
Thus, how entire Div took as image and can be saved on the server as well in .png format.
Advantages
Allows taking partial or full screenshot
Allows can render the screenshot on client without server interaction
Provide mechanism to take on-demand screenshot on the client side
Generates the screenshot as per display of the web page in the browser, in which we are taking the screenshot.
Limitations
Pages, which have frames containing pages from sources other than the origin of the main page, are not displayed properly. Frames are grayed out.
Many CSS3 properties are not yet supported.
If the page being captured already has canvas element rendering the image from the source other than the source of the main page, the screenshot would not be able to display the canvas element properly.
