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

JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。

html2canvasライブラリを使う

今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。

html2canvasは、その名の通り指定したDOM要素をcanvasへ変換してくれるライブラリです。変換後のcanvasをそのまま画像としてダウンロードできるため、少ないコード量で目的を実現できます。

ライブラリの読み込み

CDNから読み込むのが最も手軽です。

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

npmで依存関係を管理している場合は、次のコマンドでインストールできます。

npm install html2canvas

実装例

実際のコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
    #capture{
        height: 300px;
        width: 300px;
        display: flex;
        flex-direction: column;
        background-color: rgb(43, 216, 216);
    }
    span{
        flex: 1;
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 20px;
    }
    #first{ background-color: rgb(15, 168, 15); }
    #second{ background-color: rgb(43, 93, 228); }
    #third{ background-color: rgb(194, 55, 13); }
</style>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    const download = () => {
        html2canvas(document.querySelector('#capture')).then(canvas => {
            document.body.appendChild(canvas);
        });
    }
</script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="download()">
Download
</button>
</body>
</html>

出力結果

このコードを実行すると、3つの色付きブロックと「Download」ボタンが表示されます。

JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

「Download」ボタンをクリックすると、次のように変化します。

JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

2枚目の画像では「Download」ボタンの隣にcanvas要素が追加されていることが確認できます。このcanvasを右クリックして保存すれば、キャプチャした画像をそのままローカル環境にダウンロードできます。

ワンクリックで画像ファイルとして保存する

上記の例ではcanvasをページ上に表示しましたが、toDataURL()を組み合わせれば、ボタンを押すだけで直接PNGファイルとしてダウンロードさせることも可能です。

const download = () => {
  html2canvas(document.querySelector('#capture')).then(canvas => {
    const link = document.createElement('a');
    link.download = 'capture.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  });
}

これでユーザーは右クリック操作を行うことなく、capture.pngというファイル名で画像を取得できます。

利用時の注意点

  • 外部画像とCORS: 異なるオリジンの画像が含まれる場合、サーバー側でCORSが許可されていないとキャプチャ結果に正しく反映されません。{ useCORS: true }オプションの指定を検討しましょう。
  • CSSの再現度: フィルターや複雑なbox-shadowなど、一部のCSSプロパティは完全には再現されない場合があります。
  • クロスオリジンのiframe: セキュリティ上の制約により、外部iframeの内容はキャプチャできません。

まとめ

html2canvasを活用すれば、数行のコードでdiv要素を含む任意のHTML要素を手軽に画像化できます。画面のスクリーンショット機能や、帳票・カードUIの画像エクスポートなど幅広い用途に応用できるので、ぜひ試してみてください。

  1. Macでスクリーンショットを撮る方法｜画面全体・範囲指定・ウィンドウ別の撮り方を徹底解説

    AppleのMacは、一般的なコンピュータユーザーが求めるほぼすべての作業に対応できる万能マシンです。もちろん、スクリーンショット（画面キャプチャ）の撮影もそのひとつです。しかし実際には、Macでスクリーンショットを撮る具体的な方法を知らないユーザーは少なくありません。また、方法を知っていても、Macが実はさまざまな種類のスクリーンショットに対応していることに気づいていない方も多いようです。この記事では、Macで撮影できる多彩なスクリーンショットの種類と、それぞれの手順をわかりやすく解説します。画面全体のスクリーンショットを撮る方法まず、画面に撮影したい内容が表示されていることを確認します。そ

  2. Macでスクリーンショットを撮る方法!覚えておきたいキーボードショートカット完全ガイド

    WindowsからMacに乗り換えたばかりの方は、Macでのスクリーンショットの撮り方に戸惑うかもしれません。確かに、MacのキーボードにはPrint Screenキーがありません。しかし、代わりに使えるキーボードショートカットがいくつも用意されています。正しいショートカットを使えば、画面全体、単一のウィンドウ、あるいは画面の一部だけを自由にキャプチャできます。 macOS Mojave以降にアップグレードしている場合は、「スクリーンショット」アプリを使って画面のさまざまな部分をキャプチャしたり、画面の動画録画まで行えます。このアプリは「アプリケーション」フォルダ内の「ユーティリティ」セクシ