5 ms·
Show HN: I created snapDOM to capture DOM nodes as images with exceptional speed
- streptomycin 1y agoI've been using html2canvas for a long time in https://play.basketball-gm.com/ 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 https://i.imgur.com/zfSwNR1.png snapdom: https://i.imgur.com/FxowTzp.png 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 <script> tag.
- tinchox6 1y agoThank 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!
- hirako2000 1y agoHow can svg be faster, and especially more accurate (lets throw some IMG or CSS shadows for fun) than canvas?
- kaoD 1y agoYou can embed HTML in an SVG via foreignObject. Seems like that's exactly what the library is doing[0]. Whether that's faster or more reliable, I don't know. Seems likely to render different depending on where you view the SVG (especially out of browsers). [0]: https://github.com/search?q=repo%3Azumerlab%2Fsnapdom%20foreignObject&type=code https://github.com/search?q=repo%3Azumerlab%2Fsnapdom%20fore...
- tinchox6 1y agoI'm working on enabling a special full mode for those who don't mind the final size: https://github.com/zumerlab/snapdom/issues/1 https://github.com/zumerlab/snapdom/issues/1
- tinchox6 1y agoI added to README the npm / yarn reference. Thanks!
- tinchox6 1y agoIf interested I solved almost all issues you pointed out (speedy and accuracy). https://github.com/zumerlab/snapdom/issues/3 https://github.com/zumerlab/snapdom/issues/3
- badmonster 1y agoDoes snapDOM support capturing elements with CSS animations in their current frame, or does it only capture static states?
- tinchox6 1y agoYes 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
- krebby 1y agoHow 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/e93ab2ce27999aecb109e38085f2e7a7 https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e...
- streptomycin 1y agoLooks 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.
- krebby 1y agoIMO 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_Capture_API/Element_Region_Capture#the_element_capture_api https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt... Demos: https://mdn.github.io/dom-examples/screen-capture-api/element-capture/ https://mdn.github.io/dom-examples/screen-capture-api/elemen... https://mdn.github.io/dom-examples/screen-capture-api/region-capture/ 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
- streptomycin 1y agoidk, your code is 170 lines, html2canvas and similar are 1 line to use.
- tinchox6 1y agoI tested it on Chrome, Firefox and Safari
- tinchox6 1y agoHi! 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
- jdiff 1y agoCapturing 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?
- tinchox6 1y agoI 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.
- andrewstuart 1y agoScreenshots on the GitHub would be great.
- Eduard 1y agoNot only screenshots, but also actual results. As I understand the short description, this tool allows to transform a website's current visual state into an SVG.
- andrewstuart 1y agoWhy not do it at the back end where you can literally snapshot node to png.
- nikeee 1y agoDoes it work with some DOM polyfill in Node.js?
- tinchox6 1y agoNot tested yet
- maxloh 1y agoMaybe add a function to convert to PDF? I'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.
- tinchox6 1y agoIts a bit out of scope right now, but I thing it would be possible using some external libraries such as jsPDF or svg2pdf.js
- ashishact 1y agoImage 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.
- tinchox6 1y agoThank you for the suggestion!
- darrenf 1y agoI’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?
- tinchox6 1y agoSincerely, I don't know if snapdom would work on a browser extension. I've never tested it on this scenery
- deleted 1y ago[deleted]
- genewitch 1y agoFirefox has screenshot that auto-picks elements, or you can click and drag a crop, or you can save the whole page. That and ad nauseam are the reason I use firefox; that singlefile also works is great (single html file dump of a web page, somehow).
- braebo 1y agoI 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.
- tinchox6 1y agoYes they are so good. But in my case I need to work only on the client side
- rs186 1y agoHow does this compare with https://www.npmjs.com/package/dom-to-image-more https://www.npmjs.com/package/dom-to-image-more?
- tinchox6 1y agoIt is pretty the same idea. There are many good solutions like dom-to-imge-more: the battle tested html2canvas, dom-to-image, modern-screenshot, etc. SnapDom is focused on avoiding long-taks whenever is possible because was designed to a zoomble UI engine that needs the capture doesnt affect the transition. But this is the first public version and there many things to adjust.
- simonw 1y agoTiny 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).
- G_o_D 1y agoIt doesnt load, snapdom dont appear in my devtools had to copy paste script Plus it just struck at pending promise dont work Plus css is messed up, i cant call it a snapshot, if it dont look same domtoimage lib works for me and is fast whole html body node captured within second
- _f9cu 1y agoHow does it work
- Sephr 1y agoAwesome! 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 <foreignObject> 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 https://issues.chromium.org/issues/41054640#comment49 2. https://developer.mozilla.org/en-US/docs/Web/API/CropTarget/fromElement_static https://developer.mozilla.org/en-US/docs/Web/API/CropTarget/...
- tinchox6 1y agoAll isues fixed https://github.com/zumerlab/snapdom/releases/tag/v0.9.2 https://github.com/zumerlab/snapdom/releases/tag/v0.9.2
- matt-attack 1y agoCan you explain what the use case is for this tool?