Html-To-Imageはhtml2canvasの代わりになるのか

はじめに

「ダッシュボードの画面をそのまま画像として保存したい」「SNSシェア用にコンポーネントを画像化したい」——こうした要望に応えるとき、多くの人がまず候補に挙げるのが html2canvas です。しかし html2canvas は開発が停滞気味で、CSSの新機能への対応に不安を感じることもあります。

そんなときに選択肢となるのが Html-To-Image です。DOM要素をCanvas経由で画像に変換するという発想は同じですが、より軽量な実装と活発なメンテナンスが魅力のライブラリです。この記事では、Html-To-Imageの特徴から実際の使い方までを解説します。

Html-To-Imageとは

Html-To-Imageは、DOM要素をHTML5 CanvasとSVGを使ってPNG・JPEG・SVGなどの画像形式に変換できるJavaScriptライブラリです。人気の高かった dom-to-image をベースにフォークされ、TypeScriptでの型安全性やバグ修正、パフォーマンス改善が加えられています。

主な特徴

多彩な出力形式 - PNG、JPEG、SVG、Blob、Canvas、ピクセルデータまで、用途に応じて出力形式を選べます
TypeScript対応 - 型定義が同梱されているため、TypeScriptプロジェクトでもそのまま安心して使えます
外部通信不要 - サーバーサイドのレンダリングを介さず、ブラウザ内だけで画像変換が完結します
軽量な依存構成 - 外部ライブラリへの依存が少なく、バンドルサイズを抑えやすい設計になっています

インストール

npm、yarn、pnpmのいずれでもインストールできます。

# npm
npm install html-to-image --save

# yarn
yarn add html-to-image

# pnpm
pnpm add html-to-image

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

<script src="https://unpkg.com/html-to-image/dist/html-to-image.js"></script>

基本的な使い方

まずは、指定したDOM要素をPNG画像として取得する最もシンプルな例です。

import { toPng } from "html-to-image";

const node = document.getElementById("capture-target");

if (node) {
  toPng(node)
    .then((dataUrl) => {
      const img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    })
    .catch((error) => {
      console.error("画像の生成に失敗しました", error);
    });
}

toPng 以外にも、用途に応じて次のような関数が用意されています。

import { toJpeg, toSvg, toBlob, toCanvas } from "html-to-image";

// JPEG形式で取得(品質は0〜1で指定)
const jpegDataUrl = await toJpeg(node, { quality: 0.95 });

// SVG形式で取得
const svgDataUrl = await toSvg(node);

// Blobとして取得(ファイルアップロードなどに便利)
const blob = await toBlob(node);

// Canvas要素として取得(さらに加工したい場合)
const canvas = await toCanvas(node);

実践的なユースケース

画面キャプチャをダウンロードさせる

管理画面のグラフやカード要素を、ボタン一つでPNGとしてダウンロードできるようにする実装です。

import { toPng } from "html-to-image";

async function downloadNodeAsImage(node: HTMLElement, fileName: string) {
  const dataUrl = await toPng(node, {
    cacheBust: true,
    pixelRatio: 2, // Retinaディスプレイ向けに高解像度で書き出す
  });

  const link = document.createElement("a");
  link.download = fileName;
  link.href = dataUrl;
  link.click();
}

const chartNode = document.getElementById("sales-chart");
if (chartNode) {
  downloadNodeAsImage(chartNode, "sales-chart.png");
}

Reactコンポーネントを画像化する

Reactではrefでノードを取得し、任意のタイミングで画像化する実装がよく使われます。

import { useRef } from "react";
import { toPng } from "html-to-image";

function ShareCard() {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleExport = async () => {
    if (!cardRef.current) return;

    const dataUrl = await toPng(cardRef.current);
    const link = document.createElement("a");
    link.download = "share-card.png";
    link.href = dataUrl;
    link.click();
  };

  return (
    <div>
      <div ref={cardRef} className="share-card">
        <h2>今日の実績サマリー</h2>
        <p>タスク完了数: 12件</p>
      </div>
      <button onClick={handleExport}>画像として保存</button>
    </div>
  );
}