Rasterization API proposal

proposal.md

Rasterization API

Abstract

Rasterization API defines interface for making snapshots from HTML elements.

Introduction

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.

API interface

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 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

###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 result
• HTMLElement - is an element rasterized

Security concerns

• Rasterization API should ignore input fields values set and represent them as empty or just created.
• Iframes rendered accordingly to same origin politics.

I use this -- it works.

http://cburgmer.github.io/rasterizeHTML.js/

@PixelsCommander An inserted node is anyway adopted by a document. The ownerDocument property of a node says to what document the node is inserted. So, it is possible to say to what document the node belongs.

All rendered things like text nodes, HTML- and SVG-elements, documents, all inherit from Node’s methods and properties so node.rasterize(options); makes more sense, when a node is really inserted into the DOM.

I cry when I think that this is not a thing :'(

what happened to css shaders, does anyone know?

Have a look at immersive-web/dom-overlays#28, maybe there's a path to similar functionality via new WebXR efforts — something like this will be clearly needed 🤔