Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

41–45 of 45 posts

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

#41

Post by Sephr »

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.

The most significant roadblock was that drawing SVG with inline subresources (data: and blob: URIs) tainted canvases in Chrome and Safari, and this was partially resolved in 2019[1].

Notably, some issues still remain but apparently it's now workable. As is apparent from snapDOM, completely accurate CSS normalization is still an unsolved problem.

While I'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].

1. https://issues.chromium.org/issues/41054640#comment49

2. https://developer.mozilla.org/en-US/docs/Web/API/CropTarget/...

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

#42

Post by tinchox6 »

tinchox6 wrote: post #6
streptomycin wrote: post #2

I've been using html2canvas for a long time in https://play.basketball-gm.com/ 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. html2canvas: https://i.imgur.com/zfSwNR1.png snapdom: https://i.imgur.com/FxowTzp.png Also I recommend putting the npm package name clearly in your README. I guess I don't really know what other…

Thank you for testing it out and sharing the screenshots! I’ve run some performance tests using Vitest Bench, and SnapDOM was faster. I also created a few manual demos, and SnapDOM won in both speed and accuracy. That said, I still need to run more real-world tests. So, thanks again for your help!

I'm working on enabling a special full mode for those who don't mind the final size:

https://github.com/zumerlab/snapdom/issues/1

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

#43

Post by tinchox6 »

streptomycin wrote: post #2

I've been using html2canvas for a long time in https://play.basketball-gm.com/ 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. html2canvas: https://i.imgur.com/zfSwNR1.png snapdom: https://i.imgur.com/FxowTzp.png Also I recommend putting the npm package name clearly in your README. I guess I don't really know what other…

If interested I solved almost all issues you pointed out (speedy and accuracy).

https://github.com/zumerlab/snapdom/issues/3

Post reply on HN