I've been using html2canvas for a long time in <a href="https://play.basketball-gm.com/" rel="nofollow">https://play.basketball-gm.com/</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://i.imgur.com/zfSwNR1.png" rel="nofollow">https://i.imgur.com/zfSwNR1.png</a><p>snapdom: <a href="https://i.imgur.com/FxowTzp.png" rel="nofollow">https://i.imgur.com/FxowTzp.png</a><p>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.
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've been using CropTarget.fromElement with a CaptureController: <a href="https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e7a7" rel="nofollow">https://gist.github.com/akre54/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 <foreignObject> 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's now workable. As is apparent from snapDOM, completely accurate CSS normalization is still an unsolved problem.<p>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].<p>1. <a href="https://issues.chromium.org/issues/41054640#comment49" rel="nofollow">https://issues.chromium.org/issues/41054640#comment49</a><p>2. <a href="https://developer.mozilla.org/en-US/docs/Web/API/CropTarget/fromElement_static" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CropTarget/...</a>
All isues fixed <a href="https://github.com/zumerlab/snapdom/releases/tag/v0.9.2">https://github.com/zumerlab/snapdom/releases/tag/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'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://www.npmjs.com/package/dom-to-image-more" rel="nofollow">https://www.npmjs.com/package/dom-to-image-more</a>?