allan_s 2 days ago

For the 1st example, snapdom is not only faster, but actually correct, while html2canvas has some artifacts (on Linux/Firefox)

Reply View 2 replies
  • jmm77 2 days ago

    Thank you for mentionig this. There are still some caveats I hope fix soon. And I working on a plugin system to allow user modify all aspects of the capture

    Reply View 0 replies
  • arecsu 2 days ago

    Second this. Congratulations for snapDOM by the way. It performs great!

    Reply View 0 replies
djxfade 2 days ago

Very cool! How does this work from a technical standpoint? Do you have to implement a full HTML/CSS renderer in JS, or is there an official browser API to capture the elements as image data?

Reply View 1 reply
  • jmm77 2 days ago

    I'm using several functions to clone the DOM and insert it into an SVG <foreignObject>. This approach is now well supported across modern browsers, although <foreignObject> is still a rather primitive way to handle HTML and styles within SVG, which can sometimes lead to results that aren't fully precise in certain cases. To reduce the size, I created internal CSS classes to avoid repeating CSS properties, and I'm also using several caches to prevent re-cloning styles that have already been processed. There's still a long journey ahead, but I hope a plugin system will allow for more fine-grained control over all capture stages

    Reply View 0 replies
XCSme 2 days ago

Congrats!

If a render is 13ms (under 16ms), it means it could, in theory, also record page video capture at 60fps or 30fps?

Reply View 1 reply
  • jmm77 2 days ago

    Yes, I'm afraid it depends a lot on what elements you are capturing. But maybe with a plugin designed to perform a capture burst and collect them in an array, it would be possible to generate an animation as output.

    Reply View 0 replies
kreetx 2 days ago

SnapDOM can capture HTML elements as SVG - what are use cases for this?

Reply View 6 replies
  • jmm77 2 days ago

    Yes, the default capture output is a svg dataurl. But there many other export options. This lib was made as an internal tool for another project called Zumly that is zoomable engine and the svg format was the faster output I found. But then I realized that could be an independent tool like html2canvas

    Reply View 2 replies
    • postepowanieadm 2 days ago

      Zumly seems to be really interesting idea - are there any real world examples?

      Reply View 1 reply
      • jmm77 2 days ago

        I really hope there will be, but it's still experimental. If it works well, I think there could be use cases such as dashboards, home automation UIs, charts, or even industrial line control.

        Zumly is actually a spinoff of ZircleUI, the first project I ever worked on. Zircle eventually split into Zumly (which is still a work in progress) and Orbit, a CSS tool that makes it easy to create any kind of radial design.

        Reply View 0 replies
  • JimDabell 2 days ago

    It seems like it would be a lot more efficient to use SVG for screenshot testing design system components rather than raster images.

    Reply View 2 replies
    • nine_k 2 days ago

      The SVG in question contains HTML elements as <foreignObject> nodes and thus still depends on the browser to render them. A bitmap has zero dependencies, and can be processed and compared fully outside a browser.

      Reply View 1 reply
      • JimDabell 2 days ago

        Oh wow, I didn’t realise that. That means SVG output is way less useful than I expected.

        Reply View 0 replies