Taking screenshots for your web app

ホーム
アプリ関連ニュース
技術情報
Taking screenshots for your web app

2022年6月13日
技術情報

To take screenshots of your website without using third-party services, we recommend using the html2canvas library. You can use this script to take a “screenshot” of a web page or part of it directly in the user’s browser.

As mentioned above, use the html2canvas library to take screenshots of the elements in the DOM. You can download this library with npm using the following command

npm install html2canvas

Or you can just include the asset file like this

<script src="/path/to/html2canvas.min.js"></script>

You can visit to the official Github repo here. I will add some samples working around to capture or download the screenshot.

Taking Screenshot

html2canvas(document.body).then(function(canvas) {
    var base64img = canvas.toDataURL("image/png");
    window.open(base64img);
});

Downloading with blob method

html2canvas(document.body).then(function(canvas) {
    canvas.toBlob(function(blob) {
        window.saveAs(blob, "ss.png");
    });
});

But you have to be aware of this blob method might not be available for all browsers. If you want to use the blob method , you may have to use this canvas-blob library to be able to support at all browsers.

Yuuma