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
element- HTMLElement or HTMLDocument which should be rasterized
optionsObject- (optional) rasterization options
optionsObject properties (all optional)
async: Boolean - determines is call asynchronous or not. Default - false
callback: Function - used to handle async rasterization calls. Default - undefined
waitForResourcesLoading: Boolean - determines should we wait for resources used in Element to load or not. They are images, fonts etc. Default - true
width: Number - width of resulting ImageData. Do we need it?
height: Number - height of resulting ImageData. Do we need it?
scale: Number - zoom factor
ignoreSelector- if element matches this selector it will be not rendered
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 result
HTMLElement- 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.