fix(ext/web): pass createImageBitmap when the argument type is Blob

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

@@ -4,13 +4,16 @@ use deno_core::error::type_error;
 use deno_core::error::AnyError;
 use deno_core::op2;
 use deno_core::ToJsBuffer;
+use image::codecs::png::PngDecoder;
 use image::imageops::FilterType;
 use image::ColorType;
-use image::ImageDecoder;
+use image::DynamicImage;
+use image::GenericImageView;
 use image::Pixel;
 use image::RgbaImage;
 use serde::Deserialize;
 use serde::Serialize;
+use std::io::BufReader;
 use std::path::PathBuf;
 
 #[derive(Debug, Deserialize)]
@@ -118,24 +121,21 @@ struct DecodedPng {
 #[op2]
 #[serde]
 fn op_image_decode_png(#[buffer] buf: &[u8]) -> Result<DecodedPng, AnyError> {
-  let png = image::codecs::png::PngDecoder::new(buf)?;
-
-  let (width, height) = png.dimensions();
+  let reader = BufReader::new(buf);
+  let decoder = PngDecoder::new(reader)?;
+  let image = DynamicImage::from_decoder(decoder)?;
+  let (width, height) = image.dimensions();
 
   // TODO(@crowlKats): maybe use DynamicImage https://docs.rs/image/0.24.7/image/enum.DynamicImage.html ?
-  if png.color_type() != ColorType::Rgba8 {
+  if image.color() != ColorType::Rgba8 {
     return Err(type_error(format!(
       "Color type '{:?}' not supported",
-      png.color_type()
+      image.color()
     )));
   }
 
-  let mut png_data = Vec::with_capacity(png.total_bytes() as usize);
-
-  png.read_image(&mut png_data)?;
-
   Ok(DecodedPng {
-    data: png_data.into(),
+    data: image.to_rgba8().into_raw().into(),
     width,
     height,
   })

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]));
+});