Rasterization API defines interface for making snapshots from HTML elements.
Getting a snapshot of HTML element is a common task used for making thumbnails, snapshots during integration testing, printing HTML content, GPU rendering, etc. Previous attempts to implement rasterization like Mozilla`s drawWindow API were lacking of flexibility, and have some security concerns unsolved. However rasterization is not something we should be afraid of since it is already available using third - party libraries such as html2canvas or rasterizeHTML. They work pretty well but have preformance issues and are not well maintained. Current proposition is aiming to provide native API for nodes rasterization in simple, flexible and performant manner.
Since rasterization result is affected by all document styles it should belong to document. Proposed method name simply reflects intention.
document.rasterize(element, optionsObject): ImageData
###Parameters
element
- HTMLElement or HTMLDocument which should be rasterizedoptionsObject
- (optional) rasterization options
###optionsObject
properties (all optional)
async
: Boolean - determines is call asynchronous or not. Default - falsecallback
: Function - used to handle async rasterization calls. Default - undefinedwaitForResourcesLoading
: Boolean - determines should we wait for resources used in Element to load or not. They are images, fonts etc. Default - truewidth
: Number - width of resulting ImageData. Do we need it?height
: Number - height of resulting ImageData. Do we need it?scale
: Number - zoom factorignoreSelector
- if element matches this selector it will be not rendered
###Return value
When called in synchronous mode it returns ImageData which could be displayed via Image tag, be drawn on Canvas or converted to Blob. If called in async mode API returns promise.
###Callback function arguments and scope
Two parameters are sent to callback function:
ImageData
- rasterization resultHTMLElement
- is an element rasterized
- Rasterization API should ignore input fields values set and represent them as empty or just created.
- Iframes rendered accordingly to same origin politics.
There's a lot more security issues than just input fields and iframes. Images not from the same origin can not be rendered. Canvases that are dirty (ie, they've had an image drawn in them that is from another origin), can not be rendered. anchor elements can not have their visited style applied.
On top of that you'd need lots of options. You mentioned
width
andheight
. Yes of course you'd need them. What size does a<div style="width: 100%;"/>
render if it's not in the DOM? You'd probably also need a devicePixelRatio. Then you'd probably also need query functions so you can ask if the content is going to fit for a certain render size. You'd probably need pagination features so you can render a portion of the element, in other words you need scroll offsets. The browser couldn't give you back an ImageData for a long page that might be 1280 x 20000 pixels (which is not uncommon for a page with a long discussion thread).These are just some of the reasons why no one has implemented it. To actually implement and make it safe would require a ton of work. Mozilla's example API was a privileged only API meaning it could only be run by extensions, not a web page since it wouldn't have been safe. Then, on top of that it's probably not worth the effort. As neat as it would be to play with it's unlikely more than a few experimental websites would use it. Look at 3D CSS, except a few example pages and fun demos it's used almost no where.
I'm not trying to discourage you. Just pointing out there's a many issues to be aware of