Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed

I&#x27;ve been using html2canvas for a long time in <a href="https:&#x2F;&#x2F;play.basketball-gm.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;play.basketball-gm.com&#x2F;</a> so I gave your library a try. It was much slower (I know your README has benchmarks saying the opposite so idk) and the result looked a lot worse.<p>html2canvas: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;zfSwNR1.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;zfSwNR1.png</a><p>snapdom: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;FxowTzp.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;FxowTzp.png</a><p>Also I recommend putting the npm package name clearly in your README. I guess I don&#x27;t really know what other people are doing these days, but I think most people are like me and consume packages like this from npm rather than a &lt;script&gt; tag.

Capturing HTML as scalable SVGs is huge, how do you manage condensing all of CSS and its quirks into an SVG? Do you only support a subset of styling properties and rely on the browser to calculate layouts for you?

How does this compare to something like the the Media Capture API? Looks like this uses `canvas.toDataURL()` which can be slow to serialize compared to `toBlob` or `canvas.captureStream(0).getVideoTracks()`<p>I&#x27;ve been using CropTarget.fromElement with a CaptureController: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;akre54&#x2F;e93ab2ce27999aecb109e38085f2e7a7" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;akre54&#x2F;e93ab2ce27999aecb109e38085f2e...</a>

Tiny feature request: snapdom.toJpg(el) appears to return a JPEG image where the background color for any transparent areas is set to black - it would be useful to be able to set that to another color (I needed it to be white).

Awesome! I was making exactly this library 13 years ago but only made it as far as creating CSS and other asset inlining+normalization tools before I ran into a few major roadblocks.<p>The most significant roadblock was that drawing SVG &lt;foreignObject&gt; with inline subresources (data: and blob: URIs) tainted canvases in Chrome and Safari, and this was partially resolved in 2019[1].<p>Notably, some issues still remain but apparently it&#x27;s now workable. As is apparent from snapDOM, completely accurate CSS normalization is still an unsolved problem.<p>While I&#x27;m excited to see the HTML-in-foreignObject use case mature, it is also important to point out that the Media Capture API now has the ability to capture individual elements natively in Chrome[2].<p>1. <a href="https:&#x2F;&#x2F;issues.chromium.org&#x2F;issues&#x2F;41054640#comment49" rel="nofollow">https:&#x2F;&#x2F;issues.chromium.org&#x2F;issues&#x2F;41054640#comment49</a><p>2. <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CropTarget&#x2F;fromElement_static" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CropTarget&#x2F;...</a>

All isues fixed <a href="https:&#x2F;&#x2F;github.com&#x2F;zumerlab&#x2F;snapdom&#x2F;releases&#x2F;tag&#x2F;v0.9.2">https:&#x2F;&#x2F;github.com&#x2F;zumerlab&#x2F;snapdom&#x2F;releases&#x2F;tag&#x2F;v0.9.2</a>

Image in the readme would really be helpful. In fact anytime there is a visual output it makes sense to put an image. Thanks for creating this though - Will give it a try for an upcoming project.

I’ve been writing a browser extension recently, and part of the functionality I want is to export part of a view as an image, shareable for the socials. I wanted to use html2canvas, but the docs explicitly advise against using it in a browser extension. Would snapDOM be suitable for inclusion in an extension?

Maybe add a function to convert to PDF? I&#x27;ve always dreamed of converting an element or the document body to a long-scrolling PDF. I tried to implement it with Playwright Python, but I had no luck. The resulting PDF height is messed up.

It doesnt load, snapdom dont appear in my devtools had to copy paste script<p>Plus it just struck at pending promise dont work<p>Plus css is messed up, i cant call it a snapshot, if it dont look same<p>domtoimage lib works for me and is fast whole html body node captured within second

How does this compare with <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;dom-to-image-more" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;dom-to-image-more</a>?

I found puppeteer or playwright to be good at this with their screenshot method. I made a cli tool for this recently that worked quite well.

Can you explain what the use case is for this tool?

Does snapDOM support capturing elements with CSS animations in their current frame, or does it only capture static states?

Screenshots on the GitHub would be great.

Does it work with some DOM polyfill in Node.js?

How does it work

Why not do it at the back end where you can literally snapshot node to png.