Generating Images from a Complex DOM (Including iframes)

Question

I'm working on an application (am owner) similar to Canva (wouldn't be a competitor), where the "canvas" is constructed of standard DOM elements instead of the HTML canvas element. I'm currently working out how to export a canvases DOM and with the following requirements:

1. Complex Content Handling: The exported view should accurately capture intricate DOM components, especially iframes.
2. Diverse Export Formats: The solution should support various file types, notably png, jpg, svg, and a nice-to-have would be mp4.
3. High-Quality Exports: The exported files should maintain high resolution and fidelity, closely resembling the original content.
4. Transparent image support.

I'm looking at tools like Puppeteer and html2canvas. While both are promising,, I'm uncertain about their ability to meet the above requirements and also their ease-of-use. I've used html2canvas before and it was a bit of a headache.

How might platforms like Canva, which likely have similar requirements, manage such exports? This is a long shot but anyone from Canva around to answer :D

Recommendations, insights, or suggestions for alternative methods would be greatly appreciated.

Answer 1

Another tool I've heard of to do this is dom-to-image (https://github.com/tsayen/dom-to-image). It supports PNG/JPEG/SVG, and appears to support complex DOM (although I'm not exactly sure about iframes). There's also a fork of dom-to-image called dom-to-image-more which has some fixes added (https://github.com/1904labs/dom-to-image-more). Hope this helps!