JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 CanvasでWebページのスクリーンショットを撮る方法【html2canvas活用術】

Webページのスクリーンショットを撮りたいと思ったことはありませんか？実は、HTML5 CanvasとJavaScriptライブラリ「html2canvas」を組み合わせることで、ブラウザ上でページ全体、あるいは特定の要素のキャプチャ画像を生成できます。

html2canvasとは？

html2canvasは、Webページ全体またはページの一部をキャプチャできるJavaScriptライブラリです。ただし、実際に「スクリーンショットを撮る」わけではありません。ページのDOM情報を読み取り、その内容をもとにCanvas上にビュー（画像）を再構築する仕組みになっています。そのため、CSSのレンダリング結果をある程度忠実に再現しながら、画像データとして出力できるのが特徴です。

実装例：スクリーンショット機能を作ってみよう

以下に基本的なサンプルコードを示します。この例では、html2canvas.jsを<head>タグ内で読み込み、ボタンをクリックするとhtml2canvas()メソッドが呼び出される仕組みです。処理の結果としてbase64形式の値が返され、それを画像ソースや画像ファイルとして活用できます。

<!DOCTYPE html>
<html>
    <head>
        <script src="html2canvas-master/dist/html2canvas.js"></script>
    </head>
    <body>
        <h1>Take screenshot</h1>
        <div class="container" id='container'>
            <img src='images/one.jpg' width='50' height='50'>
            <img src='images/two.jpg' width='50' height='50'>
        </div>
        <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
        <script>
            function screenshot(){
                html2canvas(document.body).then(function(canvas) {
                    document.body.appendChild(canvas);
                });
            }
        </script>
    </body>
</html>

コードのポイント解説

  • ライブラリの読み込み：<head>内でhtml2canvas.jsを外部スクリプトとして読み込みます。
  • html2canvas()メソッド：引数にキャプチャ対象の要素（この例ではdocument.body＝ページ全体）を指定します。
  • Promiseによる非同期処理：.then()を使って、生成されたcanvasオブジェクトを受け取り、appendChild()でページに追加表示しています。

応用：画像としてダウンロードする方法

生成したcanvasは、toDataURL()メソッドを使えばbase64形式の画像データに変換できます。これを<a>タグのdownload属性と組み合わせれば、ユーザーがボタン一つでPNG画像として保存できるようになります。

html2canvas(document.body).then(function(canvas) {
    var link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = canvas.toDataURL();
    link.click();
});

注意点

  • 同一オリジンポリシー：外部ドメインの画像を含む場合、CORS設定がないとキャプチャが正しく行えないことがあります。
  • CSSの再現度：すべてのCSSプロパティが完全にサポートされているわけではないため、複雑なレイアウトでは表示が異なる場合があります。
  • iframeの内容：クロスオリジンのiframe内のコンテンツはキャプチャできません。

このように、html2canvasを使えばクライアントサイドのJavaScriptだけでスクリーンショット機能を実装できます。フォーム入力内容の確認画面や、レポートの画像保存機能など、さまざまな場面で活用してみてください。

  1. Macのタグ機能を次のレベルに引き上げる5つの便利アプリ

    Macでファイルを探すのに時間がかかり、生産性が下がったと感じたことはありませんか?Finderはここ数年大きな進化こそ見られませんが、従来のファイルとフォルダの階層構造にとらわれない「タグ」機能など、ファイル管理のためのさまざまな手段を提供しています。 タグを使えば、ファイルはどこに保存していても共通のタグでまとめられ、Spotlight検索やスマートフォルダで絞り込むことができます。この記事では、macOSのタグ機能を拡張し、必要なときに素早くファイルを整理・検索できる5つのアプリをご紹介します。 1. Leap Leapは、ファイルの保存方法や検索方法を根本から再定義するFinderとS

  2. Python（Tkinter）でウィンドウのスクリーンショットを撮る方法

    Pythonには豊富なモジュールや関数が用意されており、多機能なアプリケーションを構築・開発できます。中でもTkinterは、GUIベースのアプリケーション作成に広く利用されている有名なPythonライブラリです。ウィンドウのスクリーンショットを撮影するアプリケーションを開発したい場合も、Tkinterを使えばGUI部分を簡単に構築できます。 この記事では、以下のステップに沿ってアプリケーションの仕組みを解説します。 必要なライブラリ – 画像処理用の Pillow（PIL）、およびファイル名のランダム化やエポック時間の処理に使用するPython標準の timeモジュール。さらに、画面キャ