rasterizeHTML.js
rasterizeHTML.js copied to clipboard
cburgmer
Body or Html element background does not apply to whole canvas
A background defined on <body> or <html> are supposed to apply to the whole canvas, not just the size of the element itself (http://www.w3.org/TR/css3-background/#special-backgrounds).
Also see #94
Is it possible to sneak into attached stylesheets to check background color associated with body or html or classes associated with them? Once the color is found, canvas can be filled with that color before drawing the rasterized content. I believe this approach will some clashes with Firefox's Cross-domain Security.
Another approach could be:
- Clone the document.
- Create and Attach a
<div />element to body of a cloned document. - Make this div 100% of scrollWidth and scrollHeight of document.
- move the content of
<body />into created<div />. - Rasterize
Since the <div /> will occupy entire page size, background color in that region will be visible.
The document in any case ends up being loaded in an iframe, detached from the original URL. So we should be able to inspect it from the outside. As you propose, the background color can be proactively set, as a workaround for this limitation. However, I would not bother with the canvas, but try to apply it to the SVG image, which is the interim representation.