ブラウザ内スクリーンショットの撮り方：HTML5/Canvas/JavaScript vs. その他の方法

2024-04-02

HTML5/Canvas/JavaScriptを使ってブラウザ内スクリーンショットを取得する方法

必要なもの

HTML5に対応したブラウザ
JavaScript
Canvas

手順

HTMLファイルを作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブラウザ内スクリーンショット</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイルを作成

// canvas要素を取得
const canvas = document.getElementById('canvas');

// スクリーンショットを取得
const screenshot = canvas.toDataURL('image/png');

// スクリーンショットをダウンロード
const downloadLink = document.createElement('a');
downloadLink.href = screenshot;
downloadLink.download = 'screenshot.png';
downloadLink.click();

解説

HTMLファイルでは、canvas要素を用意します。widthとheight属性で、スクリーンショットのサイズを指定します。
JavaScriptファイルでは、canvas要素を取得します。
canvas.toDataURL()メソッドを使って、スクリーンショットを取得します。
ダウンロードリンクを作成し、href属性にスクリーンショットのデータURLを設定します。
ダウンロードリンクをクリックして、スクリーンショットをダウンロードします。

補足

上記のコードは、単純な例です。より複雑なスクリーンショットを取得したい場合は、html2canvasなどのライブラリを使うと便利です。
ブラウザによっては、セキュリティ上の理由でスクリーンショットを取得できない場合があります。

注意事項

スクリーンショットを取得する前に、ユーザーの許可を得る必要があります。
著作権で保護されているコンテンツをスクリーンショットすることは違法となる可能性があります。

応用例

Webページ全体をスクリーンショットとして保存する
スクリーンショットを編集して共有する

上記のコードは、あくまで参考です。ご自身の環境に合わせて、コードを変更する必要があります。

追加情報

2024年3月27日現在、最新のバージョンのChrome、Firefox、Safari、Edgeでは、上記のコードを使用してブラウザ内スクリーンショットを取得することができます。
Internet Explorerでは、セキュリティ上の理由により、ブラウザ内スクリーンショットを取得することができません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブラウザ内スクリーンショット</title>
</head>
<body>
    <button id="screenshot-button">スクリーンショット</button>
    <script src="script.js"></script>
</body>
</html>

// スクリーンショットボタンを取得
const screenshotButton = document.getElementById('screenshot-button');

// スクリーンショットボタンをクリックした時の処理
screenshotButton.addEventListener('click', () => {
    // スクリーンショットを取得
    const screenshot = html2canvas(document.body).then((canvas) => {
        return canvas.toDataURL('image/png');
    });

    // スクリーンショットをダウンロード
    screenshot.then((dataURL) => {
        const downloadLink = document.createElement('a');
        downloadLink.href = dataURL;
        downloadLink.download = 'screenshot.png';
        downloadLink.click();
    });
});