Run results for: createImageBitmap resize vs canvas

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

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());

Run results for: createImageBitmap resize vs canvas

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)