4 ms·
You can do something like this via the browser by printing the page to PDF then using Inkscape to convert that to SVG. I documented this here: https://www.check
by seanwilson 4y ago
You can do something like this via the browser by printing the page to PDF then using Inkscape to convert that to SVG. I documented this here: https://www.checkbot.io/article/web-page-screenshots-with-svg/ https://www.checkbot.io/article/web-page-screenshots-with-sv.... There's a few caveats though like box-shadows getting converted into bitmaps and vectors not being grouped in layers like you'd expect, plus it's heavyweight if you're wanting to script it.
I'm curious if Satori could be used to capture in-app client-side screenshots accurately.
- djbusby 4y agoThere was some Google properties that had some in-page tool to screenshot the page - wonder how they did that one?
- seanwilson 4y agoIt's all client-side apparently, essentially by writing a page renderer in JavaScript. See: https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots https://stackoverflow.com/questions/4912092/using-html5-canv... https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas
- oefrha 4y agoNote 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 4y ago> It’s incredibly annoying that screenshotting isn’t a DOM API As if we needed more browser fingerprinting vectors.