Benchmark: Alternative ImageBitmap resizing option using CanvasElement

Alternative ImageBitmap resizing option using CanvasElement (version: 0)

There is currently a bug on Chrome Version 74.0.3729.131 (Official Build) (64-bit) (5/12/2019) with ImageBitmap where attempting to resize an ImageBitmap through ImageBitmapOptions will causes the resulting ImageBitmap to render very poorly when used with drawImage, even if the resulting ImageBitmap is resized to be smaller than the source image.

Comparing performance of: Image vs ImageBitmap/Offscreen vs ImageBitmap/Offscreen Resized

Created: 5 years ago by: Guest

Jump to the latest result

Script Preparation code:

var img = new Image();
img.decoding = 'sync';

var imageBitmap;
var imageBitmapResized;
var doneLoading = false;
let canvas = document.createElement('canvas');

canvas.width = 640;
canvas.height = 480;
let canvas2 = document.createElement('canvas');
let offscreen = canvas2.transferControlToOffscreen();
offscreen.width = 640;
offscreen.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = offscreen.getContext('2d');

img.addEventListener('load', function() {
    var tempCanv = document.createElement("canvas");
    var tempCtx = tempCanv.getContext('2d');
    tempCanv.width = img.width/2;
    tempCanv.height = img.height/2;
    tempCtx.drawImage(img,0,0,tempCanv.width,tempCanv.height);
  
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
  
  Promise.all([

    createImageBitmap(tempCanv)

  ]).then(function(images) {
  imageBitmapResized = images[0];
  doneLoading = true;
}, false);
  
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
ImageBitmap/Offscreen
if (doneLoading) ctx.drawImage(imageBitmap,0,0);
ImageBitmap/Offscreen Resized
if (doneLoading) ctx.drawImage(imageBitmapResized,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
ImageBitmap/Offscreen
ImageBitmap/Offscreen Resized

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Image	176593104.0 Ops/sec
ImageBitmap/Offscreen	156608960.0 Ops/sec
ImageBitmap/Offscreen Resized	160471952.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:**
The benchmark is designed to test the performance of resizing an `ImageBitmap` using different options on Chrome Version 74.0.3729.131 (Official Build) (64-bit). Specifically, it checks how well the resulting resized image bitmap renders with `drawImage`.

**Script Preparation Code:**

1. Creates two canvas elements, one for rendering the original image and another for creating an off-screen context to resize the image.
2. Sets up event listeners for when the image is loaded.
3. When the image is loaded, it creates a temporary canvas and draws the entire image on it using `drawImage`.
4. Then, it waits for two promises to resolve:
	* The first promise resolves when the original image bitmap (`imageBitmap`) is created.
	* The second promise resolves when the resized image bitmap (`imageBitmapResized`) is created from the temporary canvas.

**Html Preparation Code:**
The benchmark does not have any HTML preparation code specified, so it's likely that this part is skipped or handled elsewhere in the test environment.

**Individual Test Cases:**

There are three individual test cases:

1. **Image**: Tests rendering an image directly on the canvas.
2. **ImageBitmap/Offscreen**: Tests creating and using an `imageBitmap` off-screen context to resize an image.
3. **ImageBitmap/Offscreen Resized**: Tests creating and using a resized `imageBitmap` from an off-screen context.

**Options being compared:**
The options being compared are the two approaches for resizing an `ImageBitmap`:

* Option 1: Creating a resized `imageBitmap` directly from the original image using the `createImageBitmap()` method.
* Option 2: Using an off-screen canvas to create a temporary image and then creating a resized `imageBitmap` from that.

**Pros and Cons of each approach:**

Option 1:

Pros:

* May be faster since it doesn't require additional memory allocation or context creation.
* Could potentially reduce the number of operations needed to resize the image.

Cons:

* Might result in poorer rendering quality due to possible aliasing or pixelation issues.
* May not account for any potential limitations or bugs specific to resizing `ImageBitmap` on Chrome Version 74.0.3729.131.

Option 2:

Pros:

* Can potentially provide better rendering quality since it allows for more control over the image resizing process.
* Might be able to identify any bugs or limitations in resizing `ImageBitmap` on Chrome Version 74.0.3729.131.

Cons:

* Requires additional memory allocation and context creation, which could slow down performance.
* May require more operations to resize the image, potentially increasing overhead.

**Other considerations:**

* The benchmark is designed specifically for Chrome Version 74.0.3729.131 (Official Build) (64-bit), so results may not be applicable to other browsers or versions.
* The benchmark uses a temporary canvas and off-screen context to create a resized `imageBitmap`, which could introduce additional overhead or complexities.

**Alternative approaches:**
Other alternatives for resizing an `ImageBitmap` might include:

* Using the WebGPU API, which provides more control over image processing and could potentially offer better performance.
* Utilizing WebGL or Canvas 2D rendering APIs to resize images, which could provide a balanced approach between quality and performance.
* Implementing custom image resizing algorithms using JavaScript, which could potentially be optimized for specific use cases.

Keep in mind that each alternative approach will have its own set of pros and cons, and the best choice will depend on the specific requirements and constraints of the project.

Related benchmarks:

Alternative ImageBitmap resizing option using CanvasElement (version: 0)

Comparing performance of: Image vs ImageBitmap/Offscreen vs ImageBitmap/Offscreen Resized

Created: 5 years ago by: Guest

Jump to the latest result

Image

ImageBitmap/Offscreen

ImageBitmap/Offscreen Resized

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):