feat(web): ImageBitmap (#21898)

Cargo.toml

@@ -12,6 +12,7 @@ members = [
   "test_util",
   "ext/broadcast_channel",
   "ext/cache",
+  "ext/canvas",
   "ext/console",
   "ext/cron",
   "ext/crypto",
@@ -58,6 +59,7 @@ denokv_remote = "0.5.0"
 # exts
 deno_broadcast_channel = { version = "0.126.0", path = "./ext/broadcast_channel" }
 deno_cache = { version = "0.64.0", path = "./ext/cache" }
+deno_canvas = { version = "0.1.0", path = "./ext/canvas" }
 deno_console = { version = "0.132.0", path = "./ext/console" }
 deno_cron = { version = "0.12.0", path = "./ext/cron" }
 deno_crypto = { version = "0.146.0", path = "./ext/crypto" }

cli/build.rs

@@ -152,6 +152,7 @@ mod ts {
     op_crate_libs.insert("deno.webgpu", deno_webgpu_get_declaration());
     op_crate_libs.insert("deno.websocket", deno_websocket::get_declaration());
     op_crate_libs.insert("deno.webstorage", deno_webstorage::get_declaration());
+    op_crate_libs.insert("deno.canvas", deno_canvas::get_declaration());
     op_crate_libs.insert("deno.crypto", deno_crypto::get_declaration());
     op_crate_libs.insert(
       "deno.broadcast_channel",

cli/tests/integration/js_unit_tests.rs

@@ -42,6 +42,7 @@ util::unit_test_factory!(
     globals_test,
     headers_test,
     http_test,
+    image_bitmap_test,
     image_data_test,
     internals_test,
     intl_test,

cli/tests/node_compat/test/common/index.js

@@ -34,6 +34,7 @@ let knownGlobals = [
   closed,
   confirm,
   console,
+  createImageBitmap,
   crypto,
   Deno,
   dispatchEvent,

cli/tests/unit/image_bitmap_test.ts

@@ -0,0 +1,92 @@
+// Copyright 2018-2024 the Deno authors. All rights reserved. MIT license.
+
+import { assertEquals } from "./test_util.ts";
+
+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 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(async function imageBitmapFlipY() {
+  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,
+  ]));
+});

cli/tsc/dts/lib.deno.shared_globals.d.ts

@@ -8,6 +8,8 @@
 /// <reference lib="deno.console" />
 /// <reference lib="deno.url" />
 /// <reference lib="deno.web" />
+/// <reference lib="deno.webgpu" />
+/// <reference lib="deno.canvas" />
 /// <reference lib="deno.fetch" />
 /// <reference lib="deno.websocket" />
 /// <reference lib="deno.crypto" />

cli/tsc/dts/lib.deno.window.d.ts

@@ -3,7 +3,6 @@
 /// <reference no-default-lib="true" />
 /// <reference lib="deno.ns" />
 /// <reference lib="deno.shared_globals" />
-/// <reference lib="deno.webgpu" />
 /// <reference lib="deno.webstorage" />
 /// <reference lib="esnext" />
 /// <reference lib="deno.cache" />

cli/tsc/mod.rs

@@ -94,6 +94,7 @@ pub fn get_types_declaration_file_text() -> String {
     "deno.webgpu",
     "deno.websocket",
     "deno.webstorage",
+    "deno.canvas",
     "deno.crypto",
     "deno.broadcast_channel",
     "deno.net",