fix(ext/web): properly handle Blob case for createImageBitmap (#23518)

fixes https://github.com/denoland/deno/issues/22649

ext/canvas/01_image.js

@@ -238,7 +238,9 @@ function createImageBitmap(
           "InvalidStateError",
         );
       }
-      const { data: imageData, width, height } = op_image_decode_png(data);
+      const { data: imageData, width, height } = op_image_decode_png(
+        new Uint8Array(data),
+      );
       const processedImage = processImage(
         imageData,
         width,

ext/canvas/lib.rs

@@ -130,7 +130,8 @@ fn op_image_decode_png(#[buffer] buf: &[u8]) -> Result<DecodedPng, AnyError> {
     )));
   }
 
-  let mut png_data = Vec::with_capacity(png.total_bytes() as usize);
+  // read_image will assert that the buffer is the correct size, so we need to fill it with zeros
+  let mut png_data = vec![0_u8; png.total_bytes() as usize];
 
   png.read_image(&mut png_data)?;
 

tests/unit/image_bitmap_test.ts

@@ -90,3 +90,14 @@ Deno.test(async function imageBitmapFlipY() {
     1, 0, 0, 1,   2, 0, 0, 1,   3, 0, 0, 1,
   ]));
 });
+
+Deno.test(async function imageBitmapFromBlob() {
+  const path = "tests/testdata/image/1x1-white.png";
+  const imageData = new Blob([await Deno.readFile(path)], {
+    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,255,255,255]));
+});