Live data from Hacker News

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

github.com

11–20 of 45 posts

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

#11

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…

I added to README the npm / yarn reference. Thanks!

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

#14
post #4

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()` I've been using CropTarget.fromElement with a CaptureController: https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e...

Hi! Insaw this API when I was starting to work on snapDOM but I thought it was not ok for my needs so I discarded it. Regarding other API it would be great if View Transitions API could exposed the old view in a future

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

#17
post #4

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()` I've been using CropTarget.fromElement with a CaptureController: https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e...

Hi! Insaw this API when I was starting to work on snapDOM but I thought it was not ok for my needs so I discarded it. Regarding other API it would be great if View Transitions API could exposed the old view in a future

What were your needs that the API didn't meet?

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

#19
post #4

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()` 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.

IMO it's simple enough to just write directly without library code.

For most cases, the Element Capture or Region Capture API should be sufficient: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...

Demos: https://mdn.github.io/dom-examples/screen-capture-api/elemen... https://mdn.github.io/dom-examples/screen-capture-api/region...

If you need cross-browser compatibility (and can't just use a canvas) then yeah html2canvas is the way to go

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

#20
post #6

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!

How can svg be faster, and especially more accurate (lets throw some IMG or CSS shadows for fun) than canvas?
Post reply on HN