Run results for: createImageBitmap using Blob vs image element

Run details:

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

Browser: Chrome 113

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 11 months ago

Test name	Executions per second
Create ImageBitmap with Img element	2451917.0 Ops/sec
Create ImageBitmap with Blob	1893041.0 Ops/sec

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);
});

const imageBlobLoaded = fetch('https://placekitten.com/1280/720').then(res => res.blob())

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_createImageBitmapWithImg() {
  const source = await imageLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

// case 2: use canvas to crop and resize
async function case2_createImageBitmapWithBlob() {
  const source = await imageBlobLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

Tests:

Create ImageBitmap with Img element
case1_createImageBitmapWithImg() .then(bitmap => bitmap.close());
Create ImageBitmap with Blob
case2_createImageBitmapWithBlob() .then(bitmap => bitmap.close());

Run results for: createImageBitmap using Blob vs image element

Create ImageBitmap with Img element

Create ImageBitmap with Blob