CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

Background Information

This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the ImageBitmap.

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to HTML canvas elements. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

About ImageBitMap and Motivation behind the project

We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

Steps for implementation

Initial Phase

• Step 1: Add a ImageBitmap WebIDL interface to components/script/dom/webidls and Rust implementation in components/script/dom/imagebitmap.rs
• Step 2: Add the createImageBitmap method that takes no extra x/y/w/h parameters in component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl and implement the method in component/script/dom/window.rs, handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

Subsequent phase

• Step 1: Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
• Step 2: Implement the createImageBitmap overload that accepts x/y/w/h parameters
• Step 3: Implement support for ImageBitmaps as canvas image sources in components/script/canvas_state.rs

Details about current work on implementation

Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

Starting with createImageBitmap()

• The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
• The syntax of the method looks like

const imageBitmapPromise = createImageBitmap(image[, options]);

const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);

where the parameters indicate:

image: an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.

sx, sy, sw, sh: if given, source image is cropped to the given pixels.

options (Optional): the ImageBitmap object's bitmap data is modified according to options. Available options are:

• imageOrientation
• premultiplyAlpha
• colorSpaceConversion
• resizeWidth
• resizeHeight
• resizeQuality

You can read more about these options here

The concept behind the implementation is as follows

• • For web developers pictures from HTML Standards link"**

The options given in the method call for createImageBitmap() are as given below

• • Dictionary of options picture**

Once the method for createImageBitmap() is created the following steps have to be performed

• The close() method should be implemented

 1. Set this ImageBitmap object's Detached internal slot value to true.
 2. Unset this ImageBitmap object's bitmap data.

• The getter for width attribute should be created with the following steps

 1. If this ImageBitmap object's Detached internal slot's value is true, then return 0.
 2. Return this ImageBitmap object's width, in CSS pixels.

• The getter for height attribute should be implemented with the following steps

 1. If this ImageBitmap object's Detached internal slot's value is true, then return 0.
 2. Return this ImageBitmap object's height, in CSS pixels.

Algorithm to design the createImageBitmap() method

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

Switching on the "image" argument the following is the sequence of actions

• If the image is an SVGImage

• If the image is a video

• If the image is a canvas

• If the image is a ImageBitmap

• If the image is a ImageData

Test Plan

The following are the respective steps in testing:

• Servo building test should be successful.
• Check for the file tidiness (following standards of servo) using the command:

For Linux or macOS:
    ./mach test-tidy
    ./mach fmt

For Windows:
    mach.bat test-tidy
    mach.bat fmt

• Update the automated servo Web Platform tests(wpt):

For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running

./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log

Once log is saved, then run to update test expectations

./mach update-wpt /path/to/logfile/<filename>.log

Team Details

Sandeep Kundala (skundal@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Mentor Details

Jay Modi

References

• What is servo?
• what is RUST programming?