image_bitmap_test.ts

// Copyright 2018-2025 the Deno authors. MIT license.

import { assertEquals, assertRejects } from "./test_util.ts";

const prefix = "tests/testdata/image";

function generateNumberedData(n: number): Uint8ClampedArray {
  return new Uint8ClampedArray(
    Array.from({ length: n }, (_, i) => [i + 1, 0, 0, 1]).flat(),
  );
}

Deno.test(async function imageBitmapDirect() {
  const data = generateNumberedData(3);
  const imageData = new ImageData(data, 3, 1);
  const imageBitmap = await createImageBitmap(imageData);
  assertEquals(
    // @ts-ignore: Deno[Deno.internal].core allowed
    Deno[Deno.internal].getBitmapData(imageBitmap),
    new Uint8Array(data.buffer),
  );
});

Deno.test(async function imageBitmapRecivesImageBitmap() {
  const imageData = new Blob(
    [await Deno.readFile(`${prefix}/1x1-red16.png`)],
    { type: "image/png" },
  );
  const imageBitmap1 = await createImageBitmap(imageData);
  const imageBitmap2 = await createImageBitmap(imageBitmap1);
  assertEquals(
    // @ts-ignore: Deno[Deno.internal].core allowed
    Deno[Deno.internal].getBitmapData(imageBitmap1),
    // @ts-ignore: Deno[Deno.internal].core allowed
    Deno[Deno.internal].getBitmapData(imageBitmap2),
  );
});

Deno.test(async function imageBitmapCrop() {
  const data = generateNumberedData(3 * 3);
  const imageData = new ImageData(data, 3, 3);
  const imageBitmap = await createImageBitmap(imageData, 1, 1, 1, 1);
  assertEquals(
    // @ts-ignore: Deno[Deno.internal].core allowed
    Deno[Deno.internal].getBitmapData(imageBitmap),
    new Uint8Array([5, 0, 0, 1]),
  );
});

Deno.test(async function imageBitmapCropPartialNegative() {
  const data = generateNumberedData(3 * 3);
  const imageData = new ImageData(data, 3, 3);
  const imageBitmap = await createImageBitmap(imageData, -1, -1, 2, 2);
  // @ts-ignore: Deno[Deno.internal].core allowed
  // deno-fmt-ignore
  assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
    0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 1
  ]));
});

Deno.test(async function imageBitmapCropGreater() {
  const data = generateNumberedData(3 * 3);
  const imageData = new ImageData(data, 3, 3);
  const imageBitmap = await createImageBitmap(imageData, -1, -1, 5, 5);
  // @ts-ignore: Deno[Deno.internal].core allowed
  // deno-fmt-ignore
  assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 4, 0, 0, 1, 5, 0, 0, 1, 6, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 7, 0, 0, 1, 8, 0, 0, 1, 9, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  ]));
});

Deno.test(async function imageBitmapScale() {
  const data = generateNumberedData(3);
  const imageData = new ImageData(data, 3, 1);
  const imageBitmap = await createImageBitmap(imageData, {
    resizeHeight: 5,
    resizeWidth: 5,
    resizeQuality: "pixelated",
  });
  // @ts-ignore: Deno[Deno.internal].core allowed
  // deno-fmt-ignore
  assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
    1, 0, 0, 1, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 3, 0, 0, 1,
    1, 0, 0, 1, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 3, 0, 0, 1,
    1, 0, 0, 1, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 3, 0, 0, 1,
    1, 0, 0, 1, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 3, 0, 0, 1,
    1, 0, 0, 1, 1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1, 3, 0, 0, 1
  ]));
});

Deno.test("imageOrientation", async (t) => {
  await t.step('"ImageData" imageOrientation: "flipY"', async () => {
    const data = generateNumberedData(9);
    const imageData = new ImageData(data, 3, 3);
    const imageBitmap = await createImageBitmap(imageData, {
      imageOrientation: "flipY",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
      7, 0, 0, 1, 8, 0, 0, 1, 9, 0, 0, 1,
      4, 0, 0, 1, 5, 0, 0, 1, 6, 0, 0, 1,
      1, 0, 0, 1, 2, 0, 0, 1, 3, 0, 0, 1,
    ]));
  });

  const imageData = new Blob(
    [await Deno.readFile(`${prefix}/squares_6.jpg`)],
    { type: "image/jpeg" },
  );
  const WIDTH = 320;
  const CHANNELS = 3;
  const TARGET_PIXEL_X = 40;
  const START = TARGET_PIXEL_X * WIDTH * CHANNELS;
  const END = START + CHANNELS;
  // reference:
  // https://github.com/web-platform-tests/wpt/blob/a1f4bbf4c6e1a9a861a145a34cd097ea260b5a49/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html#L30
  await t.step('"Blob" imageOrientation: "from-image"', async () => {
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    const targetPixel = Deno[Deno.internal].getBitmapData(imageBitmap).slice(
      START,
      END,
    );
    assertEquals(targetPixel, new Uint8Array([253, 0, 0]));
  });
  // reference:
  // https://github.com/web-platform-tests/wpt/blob/a1f4bbf4c6e1a9a861a145a34cd097ea260b5a49/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html#L55
  await t.step('"Blob" imageOrientation: "flipY"', async () => {
    const imageBitmap = await createImageBitmap(imageData, {
      imageOrientation: "flipY",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    const targetPixel = Deno[Deno.internal].getBitmapData(imageBitmap).slice(
      START,
      END,
    );
    assertEquals(targetPixel, new Uint8Array([253, 127, 127]));
  });
});

Deno.test("imageBitmapPremultiplyAlpha", async (t) => {
  const imageData = new ImageData(
    new Uint8ClampedArray([
      255,
      255,
      0,
      153,
    ]),
    1,
    1,
  );
  await t.step('"ImageData" premultiplyAlpha: "default"', async () => {
    const imageBitmap = await createImageBitmap(imageData, {
      premultiplyAlpha: "default",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
      255, 255, 0, 153,
    ]));
  });
  await t.step('"ImageData" premultiplyAlpha: "premultiply"', async () => {
    const imageBitmap = await createImageBitmap(imageData, {
      premultiplyAlpha: "premultiply",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
      153, 153, 0, 153
    ]));
  });
  await t.step('"ImageData" premultiplyAlpha: "none"', async () => {
    const imageBitmap = await createImageBitmap(imageData, {
      premultiplyAlpha: "none",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
      255, 255, 0, 153,
    ]));
  });
  await t.step('"Blob" premultiplyAlpha: "none"', async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/2x2-transparent8.png`)],
      { type: "image/png" },
    );
    const imageBitmap = await createImageBitmap(imageData, {
      premultiplyAlpha: "none",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([
      255, 0, 0, 255, 0, 255, 0, 255,
      0, 0, 255, 255, 255, 0, 0, 127
    ]));
  });
});

Deno.test("imageBitmapFromBlob", async (t) => {
  await t.step("8-bit png", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.png`)],
      { type: "image/png" },
    );
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("16-bit png", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red16.png`)],
      { type: "image/png" },
    );
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap),
      // deno-fmt-ignore
      new Uint8Array(
        [
          255, 255, // R
          0, 0, // G
          0, 0, // B
          255, 255  // A
        ]
      )
    );
  });
  await t.step("8-bit jpeg", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.jpeg`)],
      { type: "image/jpeg" },
    );
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([254, 0, 0]));
  });
  await t.step("8-bit bmp", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.bmp`)],
      { type: "image/bmp" },
    );
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("8-bit gif", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.gif`)],
      { type: "image/gif" },
    );
    await assertRejects(() => createImageBitmap(imageData), DOMException);
    // TODO(Hajime-san): remove the comment out when the implementation is ready
    // const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    // assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("8-bit webp", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.webp`)],
      { type: "image/webp" },
    );
    await assertRejects(() => createImageBitmap(imageData), DOMException);
    // TODO(Hajime-san): remove the comment out when the implementation is ready
    // const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    // assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("8-bit ico", async () => {
    const imageData = new Blob(
      [await Deno.readFile(`${prefix}/1x1-red8.ico`)],
      { type: "image/x-icon" },
    );
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("flotat-32-bit exr", async () => {
    // image/x-exr is a known mimetype for OpenEXR
    // https://www.digipres.org/formats/sources/fdd/formats/#fdd000583
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/1x1-red32f.exr`),
    ], { type: "image/x-exr" });
    await assertRejects(() => createImageBitmap(imageData), DOMException);
  });
});

Deno.test("imageBitmapFromBlobAnimatedImage", async (t) => {
  await t.step("animated png has a default image", async () => {
    // the chunk of animated apng is below (2 frames, 1x1, 8-bit, RGBA), default [255, 0, 0, 255] image
    // [ 0, 255, 0, 255,
    //   0, 0, 255, 255 ]
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/1x1-2f-animated-has-def.png`),
    ], { type: "image/png" });
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("animated png does not have any default image", async () => {
    // the chunk of animated apng is below (3 frames, 1x1, 8-bit, RGBA)
    // [ 255, 0, 0, 255,
    //   0, 255, 0, 255,
    //   0, 0, 255, 255 ]
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/1x1-3f-animated-no-def.png`),
    ], { type: "image/png" });
    const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
  await t.step("animated webp", async () => {
    // the chunk of animated webp is below (3 frames, 1x1, 8-bit, RGBA)
    //
    // [ 255, 0, 0, 127,
    //   0, 255, 0, 127,
    //   0, 0, 255, 127 ]
    const imageData = new Blob([
      await Deno.readFile(
        `${prefix}/1x1-3f-lossless-animated-semi-transparent.webp`,
      ),
    ], { type: "image/webp" });
    await assertRejects(() => createImageBitmap(imageData), DOMException);
    // TODO(Hajime-san): remove the comment out when the implementation is ready
    // const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    // assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 127]));
  });
  await t.step("animated gif", async () => {
    // the chunk of animated gif is below (3 frames, 1x1, 8-bit, RGBA)
    // [ 255, 0, 0, 255,
    //   0, 255, 0, 255,
    //   0, 0, 255, 255 ]
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/1x1-3f-animated.gif`),
    ], { type: "image/gif" });
    await assertRejects(() => createImageBitmap(imageData), DOMException);
    // TODO(Hajime-san): remove the comment out when the implementation is ready
    // const imageBitmap = await createImageBitmap(imageData);
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    // assertEquals(Deno[Deno.internal].getBitmapData(imageBitmap), new Uint8Array([255, 0, 0, 255]));
  });
});

/**
 * extract high bytes from Uint16Array
 */
function extractHighBytes(array: Uint8Array): Uint8Array {
  const highBytes = new Uint8Array(array.length / 2);
  for (let i = 0, j = 1; i < array.length; i++, j += 2) {
    highBytes[i] = array[j];
  }
  return highBytes;
}

Deno.test("imageBitmapFromBlobColorspaceConversion", async (t) => {
  // reference:
  // https://github.com/web-platform-tests/wpt/blob/d575dc75ede770df322fbc5da3112dcf81f192ec/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html#L18
  // https://wpt.fyi/results/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html?label=experimental&label=master&aligned
  await t.step('"Blob" colorSpaceConversion: "none"', async () => {
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/wide-gamut-pattern.png`),
    ], { type: "image/png" });
    const imageBitmap = await createImageBitmap(imageData, {
      colorSpaceConversion: "none",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    const firstPixel = extractHighBytes(Deno[Deno.internal].getBitmapData(imageBitmap)).slice(0, 4);
    // picking the high bytes of the first pixel
    assertEquals(firstPixel, new Uint8Array([123, 0, 27, 255]));
  });
  await t.step('"Blob" colorSpaceConversion: "default"', async () => {
    const imageData = new Blob([
      await Deno.readFile(`${prefix}/wide-gamut-pattern.png`),
    ], { type: "image/png" });
    const imageBitmap = await createImageBitmap(imageData, {
      colorSpaceConversion: "default",
    });
    // @ts-ignore: Deno[Deno.internal].core allowed
    // deno-fmt-ignore
    const firstPixel = extractHighBytes(Deno[Deno.internal].getBitmapData(imageBitmap)).slice(0, 4);
    // picking the high bytes of the first pixel
    assertEquals(firstPixel, new Uint8Array([255, 0, 0, 255]));
  });
});