zumerlab/snapdom

これは何？

主な機能

• 011回のキャプチャからDOM要素をSVG、PNG、JPG、WebP、canvas、Blobに出力できます。
• 02変更のないキャプチャを再利用し、小さな変更があった場合は影響を受けたサブツリーだけを再構築します。
• 03公式プラグインでHTML、PDF、編集可能なベクター、GIF、動画に書き出せます。
• 04プラグインフックを使って独自のエクスポーターを作成できます。
• 05サイズ、スケール、背景、除外する要素、フォントの埋め込みを設定できます。
• 06ES module、scriptタグ、TypeScript宣言を使ってブラウザーで動作します。

ユースケース

• Webアプリからダッシュボード、チャート、請求書を画像として共有する。
• レンダリング済みのページコンテンツからPDFレポートや印刷用ページを生成する。
• 編集可能なベクターアートを書き出したり、デザインをFigmaに貼り付けたりする。
• ページ上の内容をテキストまたは画像でAIエージェントに渡す。

クイックスタート

1. 1

   npmでコアパッケージをインストールする

   npm i @zumer/snapdom
2. 2

   snapdomをインポートし、要素をPNGに書き出す

使う前に知っておきたいこと

• !SnapDOMにはブラウザーのDOMが必要なため、サーバーサイドのNode.jsではブラウザー環境が必要です。
• !クロスオリジンの画像、フォント、スタイルシートには読み取り可能なリソースまたはプロキシが必要です。クロスオリジンのiframeはプレースホルダーで表示されます。
• !SVG出力はforeignObjectに依存するため、ブラウザー以外ではサポート状況が異なります。

トピック

よくある質問

snapdom とは？

DOM要素をキャプチャしてSVG、PNG、JPG、WebP、canvas、Blobに書き出すブラウザー上のJavaScriptエンジン。HTML、PDF、ベクター、GIF、動画に対応するプラグインも備えています。 SnapDOMはページ内のDOM要素をキャプチャし、SVG、PNG、JPG、WebP、canvas、Blobなどの形式に変換します。1回のキャプチャから複数の形式に出力でき、キャプチャ後に元の要素が変更されても、結果にはキャプチャ時の状態が保持されます。

snapdom は無料で使えますか？ライセンスは？

snapdom は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

snapdom は今もメンテナンスされていますか？

活発にメンテナンス中。snapdom の最終コミットは 2026年10月20日 です。

snapdom は何に使えますか？

Webアプリからダッシュボード、チャート、請求書を画像として共有する。 レンダリング済みのページコンテンツからPDFレポートや印刷用ページを生成する。 編集可能なベクターアートを書き出したり、デザインをFigmaに貼り付けたりする。 ページ上の内容をテキストまたは画像でAIエージェントに渡す。

snapdom のインストール方法は？

npmでコアパッケージをインストールする: npm i @zumer/snapdom snapdomをインポートし、要素をPNGに書き出す

snapdom はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/zumerlab/snapdom