3 ms·

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

• seanwilson 4y ago
  It'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 ago
    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 4y ago
      > It’s incredibly annoying that screenshotting isn’t a DOM API As if we needed more browser fingerprinting vectors.