I'm trying to find a way to make a screenshot of DOM-node on client-side. The best option I've come up with is wrapping DOM-node in <foreignObject> and placing it to SVG. Then SVG goes to a canvas and then it can be converted to all other formats as a Blob.
Everything works fine except the fonts. Custom fonts works only in inline SVG, but not in SVG as a separate file. I need to embed them as a Blob.
And here comes a problem: some of these fonts are hosted on Google fonts, so there is no way to get their blobs at runtime because of CORS-restrictions.
I've already tried html2canvas library and it is not reliable for my purposes. Same for dom-to-canvas and html-to-canvas. They don't solve the problem with fonts.
Also I've tried to rasterize all children text-blocks in the DOM-node, but result is far from perfect.
Server-side solution is possible, but I'd like to avoid it.
Is there something I've missed?
So I've come up with creating proxy on my server for fetching cors-fonts and css.
I check styles font imported styles and font-face rules and create new ones for svg with embedded fonts and styles.