Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
1–10 of 45 posts
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#2I'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 people are doing these days, but I think most people are like me and consume packages like this from npm rather than a tag.
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#3Does snapDOM support capturing elements with CSS animations in their current frame, or does it only capture static states?
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#4How 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()`
I've been using CropTarget.fromElement with a CaptureController: https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e...
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#5Capturing 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?
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#6I'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!
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#7Capturing 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?
I was upset about the size of generated svg file because at first all styles were inlined in each element. So I created a function to make mini css classes (.c1, c2, c3,...) So the final size is quite small.
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#8Does snapDOM support capturing elements with CSS animations in their current frame, or does it only capture static states?
Yes it capture elements with css animations in theirr current frame. It isnt't work for animted gifs. And I have to test js animations engines
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#9How 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()` I've been using CropTarget.fromElement with a CaptureController: https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e...
Looks cool, somebody should make a package that puts a nice API around it. However seems that those APIs are only in Chrome now, not Firefox or Safari.
Re: Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
#10Screenshots on the GitHub would be great.