html2canvasは"撮影"していない、それでもスクショが撮れる理由

はじめに

「このページをそのまま画像として保存したい」「レポート画面をPDFに出力したい」——Webアプリを作っていると、こうした要望に何度も出会います。しかしブラウザには標準で「画面をキャプチャするAPI」は用意されていません。サーバー側でHeadless Chromeを立てて撮影する方法もありますが、インフラのコストや構成が重くなりがちです。

そこで役立つのが html2canvas です。クライアント側のJavaScriptだけで、DOM要素を画像化できるライブラリとして長年使われ続けています。この記事では、html2canvasの特徴から具体的な実装方法までをご紹介します。

html2canvasとは

html2canvasは「Screenshots with JavaScript」を掲げるライブラリで、指定したDOM要素をブラウザ上で解析し、<canvas> 要素として描画してくれます。面白いのは、実際に画面をキャプチャしているわけではないという点です。DOMツリーと適用されているCSSスタイルを1つずつ読み取り、その情報をもとにCanvas上へ再構築しているのです。そのため「本物のスクリーンショット」とは少し性質が異なりますが、サーバーを使わずにブラウザだけで画像化が完結する手軽さから、幅広いプロジェクトで採用されています。

主な特徴

サーバー不要 - すべての処理がクライアント側で完結するため、バックエンドの構築が不要です
Promiseベースの非同期API - html2canvas(element) は Promise を返すため、then や async/await で扱えます
主要ブラウザに対応 - Chrome、Firefox、Safari、Edgeなど、モダンブラウザで動作します
柔軟なオプション - 背景色の指定、スケール変更、対象範囲の限定など、細かな調整が可能です

インストール

npmまたはyarnでインストールできます。

npm install html2canvas

yarn add html2canvas

CDN経由で読み込むことも可能です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

基本的な使い方

最もシンプルな例は、document.body をそのまま画像化するケースです。

import html2canvas from "html2canvas";

html2canvas(document.body).then((canvas) => {
  document.body.appendChild(canvas);
});

特定の要素だけを対象にしたい場合は、その要素をそのまま渡します。

const target = document.querySelector("#capture-area");

html2canvas(target).then((canvas) => {
  const imageData = canvas.toDataURL("image/png");
  console.log(imageData); // Base64形式の画像データ
});

async/await を使うと、より読みやすく書けます。

async function captureElement(selector) {
  const target = document.querySelector(selector);
  if (!target) return null;

  const canvas = await html2canvas(target, {
    backgroundColor: "#ffffff",
    scale: window.devicePixelRatio,
  });

  return canvas.toDataURL("image/png");
}

実践的なユースケース

1. 画面の一部をPNGとしてダウンロードする

ユーザーが編集した内容をそのまま画像として保存したい場合に便利です。

async function downloadAsImage(selector, fileName) {
  const target = document.querySelector(selector);
  if (!target) return;

  const canvas = await html2canvas(target, { backgroundColor: "#ffffff" });

  const link = document.createElement("a");
  link.download = `${fileName}.png`;
  link.href = canvas.toDataURL("image/png");
  link.click();
}

// 使用例
downloadAsImage("#report-card", "monthly-report");

2. PDF生成ライブラリと組み合わせる

jsPDF などと組み合わせれば、画面をそのままPDFレポートとして出力できます。

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

async function exportToPdf(selector) {
  const target = document.querySelector(selector);
  const canvas = await html2canvas(target, { scale: 2 });

  const imgData = canvas.toDataURL("image/png");
  const pdf = new jsPDF({ orientation: "portrait", unit: "px" });

  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

  pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
  pdf.save("document.pdf");
}

3. SNSシェア用のOGP画像を動的に生成する

診断結果やスコア表示など、動的なコンテンツを画像化してシェアボタンに紐づけるユースケースもよく見られます。

async function generateShareImage(selector) {
  const target = document.querySelector(selector);
  const canvas = await html2canvas(target, {
    backgroundColor: null, // 透過を維持
    scale: 2, // 高解像度で出力
  });

  return canvas.toDataURL("image/png");
}

使用時の注意点

便利な一方で、いくつか押さえておきたい制限もあります。

外部画像はCORSの制約を受けます - クロスオリジンの画像を含む要素をキャプチャする場合、プロキシ設定や useCORS オプションが必要になることがあります
すべてのCSSプロパティに対応しているわけではありません - filter や一部の新しいレイアウト機能など、再現できないスタイルも存在します
あくまで「再構築」である点 - DOM情報から描き直しているため、実際の見た目と完全に一致しない場合があります。重要な用途では出力結果を必ず目視確認することをおすすめします