Posts Learn Components Snippets Categories Tags About
/

How to save div as image with Html2Canvas with AJAX request

Learn how to capture a screenshot of a div or any other tags with Html2Canvas

Created on Aug 24, 2021

24 views

In this short snippet, you will learn how to capture a screenshot of a div tag, iframe tag, or any of the elements inside of a webpage using html2canvas and storing the image in your backend application using a plain AJAX request.

HTML Code


Define the HTML that you want to screenshot as you see fit and assign an "id" to be called by html2canvas.
<div id="special-div">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

AJAX Request


To create an AJAX request to save the image you can write the code as follows
let specialDiv = document.getElementById('special-div'); // getting special div

html2canvas(specialDiv)
    .then(canvas => {
        // create a new AJAX object
        var ajax = new XMLHttpRequest();

        // set the method to use, the backend file and set it requst as asynchrounous
        ajax.open('POST', 'screenshot-page.php', true);

        // set the request headers 
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        // set the image type to "img/jpeg" and qualty to 1 (100%)
        ajax.send("image=" + canvas.toDataURL("image/jpeg", 1));

        ajax.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
 
                // display the response sent from server
                console.log(this.responseText);
            }
        };
    });

Backend Logic To Save Image


The backend logic that is responsible to save the image on the backend is as follows.
<?php // screenshot-page.php
 
// get the incoming image data sent by the AJAX request
$screenshotImage = $_POST["image"];
 
// remove image/jpeg from left side of image data and get the remaining part
$screenshotImage = explode(";", $screenshotImage)[1];
 
// remove base64 from left side of image data and get the remaining part
$screenshotImage = explode(",", $screenshotImage)[1];
 
// replace all spaces with plus sign (helpful for larger images)
$screenshotImage = str_replace(" ", "+", $screenshotImage);
 
// convert back from base64 format
$screenshotImage = base64_decode($screenshotImage);
 
// save the image as filename.jpeg
file_put_contents("screenshot-image.jpeg", $screenshotImage);
 
// provide a response to the front-end
echo "Done";

Other Reads

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.