On: Show HN: Satori – Convert HTML and CSS to SVG

[djbusby]

There was some Google properties that had some in-page tool to screenshot the page - wonder how they did that one?

[seanwilson → djbusby]

It's all client-side apparently, essentially by writing a page renderer in JavaScript. See:

https://stackoverflow.com/questions/4912092/using-html5-canv...

https://github.com/niklasvh/html2canvas

[oefrha → seanwilson]

Note that html2canvas has a lot of limitations, since everything that needs to be rendered has to be implemented from scratch using canvas primitives. If you have (IIRC) shadows, more advanced CSS features, certain SVG icons, etc., your output will be pretty broken. I usually have to do DOM cloning and modify/hide the problematic parts before using html2canvas to generate an image.

It’s incredibly annoying that screenshotting isn’t a DOM API, while the functionality is clearly there in DevTools.

Edit: To add to the annoyance, iOS Safari is extremely stingy with canvas memory.

[account42 → oefrha]

> It’s incredibly annoying that screenshotting isn’t a DOM API

As if we needed more browser fingerprinting vectors.