Home / Tutorials / Screenshot Webpage with html2canvas
Screenshot Webpage with html2canvas cover

Screenshot Webpage with html2canvas

Learn how to screenshot a webpage, div tag, iframe tag and the whole html section using html2canvas library

8 mins

5K

3 years ago

0 comments

Beginner

In this short post, you will learn how to implement/take a screenshot of a webpage using html2canvas library. The screenshot will then be sent back to the Laravel as the backend using Axios HTTP client. The implementation steps are very simple so let's get started.
Html2canvas Homepage


Step 1: Install html2canvas


To install the html2canvas library you can either use npm or yarn.
npm install --save html2canvas

yarn add html2canvas
For an alternative, if you prefer the CDN version then just reference the script at the end of your body tag.
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

Step 2: Import html2canvas to your project


To import the library to your project you make use of JavaScript "import" module. Do note that if you are not using a build library, you can use the "require" keyword and reference it to the windows object.
import html2canvas from 'html2canvas';
window.html2canvas = html2canvas;
The "require" keywords are as follows.
window.html2canvas = require('html2canvas');

Step 3: Take Screenshot with html2canvas


To take a screenshot with this library you can call the function directly from within your page script section. The code below will take a screenshot of the "document.body" and then append it to the body to show a preview of the page being screenshotted.
<script>
    html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    });
</script>
If you want to make use of html2canvas to take a screenshot of a "div" tag or an "iframe" tag, you can "query select" the tag and pass it into the html2canvas function.
let specialDiv = document.getElementById('special-div'); // getting special div
let someIframe = document.querySelector('.some-iframe'); // getting some iframe
And when you have the reference to the element, you can just pass in and call the "then" method.
html2canvas(specialDiv).then(function(canvas) {
    document.body.appendChild(canvas);
});

Step 4: Save the screenshot as JPEG or PNG


To save the screenshot as a "jpeg" or "png" format, you can pass the canvas object to any of your backends by sending an ajax like below. In this case we'll be using the Axios HTTP library.
If you have not install axios HTTP library, then do run the command below.
npm install axios
yarn install axios
Do note that the image will be passed as a "FormData" object and the Axios have a "multiplart/form-data" set as the headers. For this example, we'll just console log the message that will be retrieved from the backend. In the normal scenario, you can provide a notification or some sort of alert to notify the user.
let specialDiv = document.getElementById('special-div'); // getting special div

html2canvas(specialDiv)
    .then(canvas => {
        let data = new FormData();
        data.set('image', canvas.toDataURL("image/jpeg", 1));
    
        axios.post('/save-screenshot', data, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then((data) => {
            console.log('message: ', data.data.message);
        })
        .catch(error => {
            console.log('error: ', error);
        })
    });

Step 5: Setup the backend Logic


For this example, we'll be using the Laravel framework as the backend. The backend logic should load the image as a stream and then save the image to the disk using the "Storage" facade. Do note that the code below only shows how the image is saved but the filename itself is returned to the client/front-end (possibly to show the user that the image is already inside the storage).
Route::post('/save-screenshot', function (Request $request) {
    /* generate the image stream */
    $imageStream = Image::make($request->image) /* base64_decode */
        ->stream('png', 100);

    /* create the image path */
    $imagePath = '/img/image-name.png';

    /* store image to disk */
    Storage::disk('public')
        ->put($imagePath, $imageStream, 'public');

    return response()->json([
        'message' => 'The image has been successfully saved',
        'image_path' => $imagePath
    ]);
});

Optional: Store Filename to DB


To store the file name into the database you can directly call the "Laravel Model" or the "DB" facade itself. For example, if this screenshot is for an article, you can write your code like below.
Article::first()->update(['poster' => $imagePath]);
By now you should be able to Screenshot the Webpage with html2canvas. If you found this tutorial to be helpful do share it with your friends and cheers happy coding!

Additional Resources

notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this