Benchmark: createImageBitmap resize vs canvas

createImageBitmap resize vs canvas (version: 12)

Firefox currently has a bug where resizeWidth/Height is not properly working and results in the image being squished or squashed. https://bugzilla.mozilla.org/show_bug.cgi?id=1733559 Therefore, compare canvas scaling to ImageBitmap scaling when it works (Chrome), and compared to just creating an ImageBitmap. Relevant: https://www.measurethat.net/Benchmarks/Show/5123/0/bug-with-resizing-imagebitmap-causes-slower-than-expect Setup can be visually inspected at: https://codesandbox.io/s/createimagebitmap-benchmark-setup-jldf3z?file=/src/index.js

Comparing performance of: Crop and Resize using createImageBitmap, currently bugged in FF 111.0 vs Crop and Resize using Canvas scaling, usually somewhat slow vs No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)

Created: one year ago by: Registered User

Jump to the latest result

HTML Preparation code:

<img id="source" src="https://placekitten.com/1280/720" crossorigin="anonymous">

Script Preparation code:

// const sourceImage = new Image();
const sourceImage = document.querySelector('#source');
const imageLoaded = new Promise((resolve, reject) => {
  if (sourceImage.complete) resolve(sourceImage);
  sourceImage.onload = () => resolve(sourceImage);
  sourceImage.onerror = reject;
  // resolve(source1);
});

function scaleSource(sw, sh, dw, dh) {
  const hRatio = dw / sw;
  const vRatio = dh / sh;
  const ratio = Math.max(hRatio, vRatio);
  const x = (sw - dw / ratio) / 2;
  const y = (sh - dh / ratio) / 2;
  return { x, y, w: sw - x * 2, h: sh - y * 2, ratio };
}

const profileWidth = 480;
const profileHeight = 360;

// Remember, all the outputs must be an ImageBitmap to be a fair comparison

// case 1: use createImageBitmap to crop and resize, bugged in firefox but working in Chrome
async function case1_createImageBitmap() {
  const source = await imageLoaded;
  const resize = scaleSource(
    source.width,
    source.height,
    profileWidth,
    profileHeight
  );

  const bitmap = await window.createImageBitmap(
    source,
    resize.x,
    resize.y,
    resize.w,
    resize.h,
    {
      resizeWidth: profileWidth,
      resizeHeight: profileHeight
    }
  );

  return bitmap;
}

// case 2: use canvas to crop and resize
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d", { alpha: false });
async function case2_canvas() {
  const source = await imageLoaded;
  const resize = scaleSource(
    source.width,
    source.height,
    profileWidth,
    profileHeight
  );

  canvas.width = profileWidth;
  canvas.height = profileHeight;

  ctx.drawImage(
    source,
    resize.x,
    resize.y,
    resize.w,
    resize.h,
    0,
    0,
    profileWidth,
    profileHeight
  );

  return await window.createImageBitmap(
    canvas,
    0,
    0,
    profileWidth,
    profileHeight
  );
}

// case 3: no scaling, use createImageBitmap to copy and allow one-off
// transfer to worker (where presumably scaling would occur) without
// requiring new canvas/context creation
async function case3_scaleInWorker() {
  const source = await imageLoaded;
  const bitmap = await window.createImageBitmap(source);
  return bitmap;
}

var holder = [];

Tests:

Crop and Resize using createImageBitmap, currently bugged in FF 111.0
case1_createImageBitmap() .then(bitmap => bitmap.close());
Crop and Resize using Canvas scaling, usually somewhat slow
case2_canvas() .then(bitmap => bitmap.close());
No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)
case3_scaleInWorker() .then(bitmap => bitmap.close());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Crop and Resize using createImageBitmap, currently bugged in FF 111.0
Crop and Resize using Canvas scaling, usually somewhat slow
No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 26 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Linux

View result in a separate tab

Test name	Executions per second
Crop and Resize using createImageBitmap, currently bugged in FF 111.0	498783.4 Ops/sec
Crop and Resize using Canvas scaling, usually somewhat slow	411916.7 Ops/sec
No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)	288507.0 Ops/sec

createImageBitmap resize vs canvas (version: 12)

Created: one year ago by: Registered User

Jump to the latest result

Crop and Resize using createImageBitmap, currently bugged in FF 111.0

Crop and Resize using Canvas scaling, usually somewhat slow

No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A