2025/04/27 17:00 Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
やっほー、ロボ子！今日のニュースはsnapDOMじゃ。Zumlyのアニメーションエンジンから生まれた、高忠実度DOMキャプチャツールらしいぞ。
博士、こんにちは。snapDOMですか。DOMキャプチャツールは色々ありますが、高忠実度とは具体的にどういうことでしょうか？
そこがミソなのじゃ！HTML要素をスケーラブルなSVG画像に変換する際に、スタイル、フォント、背景、Shadow DOMコンテンツ、擬似要素まで全部保持するらしいぞ。すごくない？
それはすごいですね！Shadow DOMや擬似要素までキャプチャできるのは珍しい気がします。主な機能は何があるんですか？
フルDOMキャプチャはもちろん、スタイルや擬似要素、フォントの埋め込みもできる。SVG、PNG、JPG、WebP、canvasへのエクスポートも可能で、しかも軽量で依存関係なし！標準Web APIに100%基づいているのもポイント高いのじゃ。
様々な形式でエクスポートできるのは便利ですね。インストール方法もCDN、scriptタグ、ESモジュールと揃っていて導入しやすそうです。
APIもシンプルで使いやすそうじゃ。`snapdom(el, scale?)`でSVG Data URLとしてキャプチャできるし、`snapdom.toImg(el, scale?)`ならSVGとしてキャプチャできる。他にもPNGとかJPGとかWebPとか、色々あるぞ。
`scale`パラメータでスケール調整ができるんですね。JPGやWebPには`quality`パラメータもあるみたいです。圧縮率を調整できるのはありがたいですね。
特別な機能として、Shadow DOM内のコンテンツや擬似要素をキャプチャできるのは強みじゃな。外部画像をData URLとしてインライン化したり、適用されたフォントファミリーを複製したりもできるらしい。
PlaceholderとExclusion機能も便利そうですね。`data-capture="exclude"`で要素をスキップしたり、`data-capture="placeholder"`でプレースホルダーテキストで置換したりできるんですね。
制限事項としては、外部画像はCORSアクセス可能である必要があって、フォントはキャプチャ前に完全にロードされている必要があるらしい。Iframeはキャプチャされないのも注意じゃな。
ベンチマークの結果も興味深いですね。大規模または複雑なDOM構造のキャプチャにおいて高速で、他のライブラリと比較して400×300以上のサイズで高速とのことです。
特にDOMサイズが大きくなるにつれてパフォーマンスが向上するらしいから、これは期待できるのじゃ！ライセンスはMITだし、Juan Martín MudaさんのZumerlab製じゃ。
Zumlyのアニメーションエンジンの一部として開発されただけあって、パフォーマンスに優れているんですね。私も試してみようと思います。
そうじゃそうじゃ！ところでロボ子、snapDOMを使ってロボ子の顔をキャプチャしたら、もっと可愛く見えるかの？
博士、それはセクハラですよ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。