A panoramic tour through HTML5 rendering itself
summary
Builds a working rasterizer that converts arbitrary HTML into an SVG foreignObject then into an image drawn on canvas, using foreignObject in SVG, data URI inlined images, and a mix of XHR/XHR2 blobs and base64 fallbacks to embed images and fonts. Executes page JavaScript by loading into an iframe and reserializing the DOM. Works reliably in Firefox; Chrome and Safari need polyfills and have binary/XHR and canvas-read restrictions; IE11 lacks foreignObject support so it fails there.
AI-written summary · about
chapters (6)
- 0:00Start
- 3:39Quick solution
- 10:07Finding external elements (1)
- 13:01Finding external elements (2)
- 16:07Finding external elements (3)
- 24:08What is this all about?
related talks
59mYou can't do that with JavaScript!
35mHTML5 APIs - The New Frontier
32mIntro to Web Graphics with HTML5 Canvas
24mSVG: Exploiting Browsers without Image Parsing Bugs
01h 08mThe quest for the graphical web
27mFrom Parentheses to Perception: How Your Code Becomes Someone Else's Reality
45mUnlocking SVG’s Superpowers
32mMagic of Computer Vision Unraveled