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.
@greggman Not sure about images. If you can do it right now with html2canvas, why should you care about the rest? Or I am wrong?
As for useful / not useful. Huh, acceleration events are used rarely also, but would I like to remove it? Nope! I would say that you will always have a bunch of criticism when API is not there, but also some appreciation when somebody find a right use case for thing which is already implemented. For this one I already listed some use cases in the article. Lets think about more...
The plan at the moment is to develop polyfill and then try to move it forward. Probably it will be based on html2canvas but definitely should have retina support since html2canvas do not have for years =(