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 following steps.

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 and implement the createImageBitmap method that takes no extra x/y/w/h parameters in component/script/dom/webidls/Window.webidl, 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 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

• • Figure 1**

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

If the image is an SVGImage

• • Figure 2**

If the image is a video

• • Figure 3**

If the image is a canvas

• • Figure 4**

If the image is a imageBitmap

• • Figure 5**

If the image is a imageData

• • Figure 6**

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?