Posts Learn Components Snippets Categories Tags About
/

Screenshot Webpage with html2canvas

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

3 weeks ago

8 mins read

990 views

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

Load comments for Screenshot Webpage with html2canvas

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored 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.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components