Html2Canvas is a JavaScript library that allows you to take a screenshot of the entire web page or a specific section with just a few lines of code.
It returns an HTML5 canvas element when it is initialized on the element that you can use to create a new image file or display a screenshot preview on the screen.
In this tutorial, I show how you can use Html2Canvas library to take a screenshot and save it to the server using PHP.
Contents
- Download and Include
- Initialize
- Example 1 – Full page screenshot
- Example 2 – Screenshot of specific area
- Example 3 – Save screenshot to the server
- Conclusion
1. Download and Include
- Download the library from GitHub.
- Include
html2canvas.jsscript at the<head>.
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
2. Initialize
Call html2canvas() method which takes selector as a parameter and with then handle canvas response.
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
canvas.toDataURL()
This method returns the base64 value which you can use to create an image source or an image file.
html2canvas(document.getElementById('container')).then(function(canvas) {
document.getElementById("image").src= canvas.toDataURL();
});
3. Example 1 – Full page screenshot
Take a screenshot of the full page and show a preview.
Completed Code
<!doctype html>
<html>
<head>
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
</head>
<body>
<h1>Take screenshot of webpage with html2canvas</h1>
<div class="container" id='container' >
<img src='images/image1.jpg' width='100' height='100'>
<img src='images/image2.jpg' width='100' height='100'>
<img src='images/image3.jpg' width='100' height='100'>
</div>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<!-- Script -->
<script type='text/javascript'>
function screenshot(){
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
}
</script>
</body>
</html>
4. Example 2 – Screenshot of specific area
In this example, I am taking a screenshot of <div id='container'> content.
Completed Code
<!doctype html>
<html>
<head>
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
</head>
<body>
<h1>Take screenshot of webpage with html2canvas</h1>
<div class="container" id='container' >
<img src='images/image1.jpg' width='100' height='100'>
<img src='images/image2.jpg' width='100' height='100'>
<img src='images/image3.jpg' width='100' height='100'>
</div>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<!-- Script -->
<script type='text/javascript'>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas) {
document.body.appendChild(canvas);
});
}
</script>
</body>
</html>
5. Example 3 – Save screenshot to the server
HTML –
Create a similar HTML layout as the above example and include the jQuery library.
Script –
Create screenshot() function where initialize html2canvas on the body. By default, html2canvas set the image background color to black if save the screenshot.
With the use of background: '#fff' set background white. Read the screenshot image base64 URL using canvas.toDataURL().
To save image to the server send AJAX POST request to ajaxfile.php where pass base64URL variable as data.
Completed Code
<!doctype html>
<html>
<head>
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
</head>
<body>
<h1>Take screenshot of webpage with html2canvas</h1>
<div class="container" id='container' >
<img src='images/image1.jpg' width='100' height='100'>
<img src='images/image2.jpg' width='100' height='100'>
<img src='images/image3.jpg' width='100' height='100'>
</div><br/>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type='text/javascript'>
function screenshot(){
html2canvas(document.body,{background: '#fff'}).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {image: base64URL},
success: function(data){
console.log('Upload successfully');
}
});
});
}
</script>
</body>
</html>
AJAX file –
Create ajaxfile.php file and upload folder to store the screenshot taken using Html2canvas.
Read $_POST['image'] value and specify upload path in $location. Explode $image by ";base64," and decode base64 value using base64_decode().
Create a unique filename and pass the filename and base64 value to file_put_contets() to store file on the server.
Completed Code
<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
6. Conclusion
Html2Canvas is a highly versatile and efficient JavaScript library that allows you to take high-quality screenshots of any webpage with ease on the client browser without server-side interaction.
It might not able to generate the proper view if there is complex CSS applied to the elements.
Browser compatibility –
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Safari 6+
