Blob type set to empty string causing InvalidStateError

[db213]

Version:
deno 2.0.0-rc.9 (release candidate, release, aarch64-apple-darwin)
v8 12.9.202.13-rusty
typescript 5.6.2

Hi there,

I'm trying to use the fetch API to grab a locally saved file. I'm using loadImageBitmap with an absolute path to a JPG file passed in as the url, prefixed with file:///. I can see that the the fetch has succeeded, however the resulting blob from const blob = await res.blob() looks like Blob { size: 695303, type: "" } and the empty string value of type is causing the following error:

error: InvalidStateError: Unsupported type ''
    at ext:deno_canvas/01_image.js:236:15
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async loadImageBitmap (file:///Users/daphnebogosian/Library/Caches/deno/npm/registry.npmjs.org/webgpu-utils/1.9.2/dist/1.x/webgpu-utils.module.js:5937:12)
    at async Promise.all (index 2)
    at async createTextureFromImages (file:///Users/daphnebogosian/Library/Caches/deno/npm/registry.npmjs.org/webgpu-utils/1.9.2/dist/1.x/webgpu-utils.module.js:5963:24)
    at async ResourceSetUnkeyed.<anonymous> (file:///Users/daphnebogosian/Documents/d2p-mk2/packages/engine/src/lib/resources/image-textures-async/index.ts:22:21)

I'm stumped on how to get around this, any tips or suggestions on what I'm doing wrong much appreciated , but also it looks like to me that the type is probably erroneously being set to '' based on the documentation for ResponseType.

Edit: I've realised I was looking at the documentation for Response and not for Blob. Blob::type is typed as just a string so it can very validly be set to empty string.

Edit2: Looks like when fetch resolves to reading a blob out of the filesystem, the content-type of the response is not set. And then the mimetype becomes null/''.

Thanks so much for reading!

[Hajime-san]

I think you should use your own file server that respond content-type header instead fetch('file:///...').

• https://docs.deno.com/runtime/tutorials/file_server/#using-the-%40std%2Fhttp-file-server-in-a-deno-project

[db213]

Thank you, that helped me get a little further! The type is now set correctly to image/jpeg, however it looks like jpegs simply aren't supported at the moment? (Though for now I should be able to get away with converting to pngs)

Additionally, when I try to use PNGs instead of JPEGs I run into the following problem so my PNGs need to fulfil certain requirements as well?

error: TypeError: Color type 'Rgb8' not supported
    at ext:deno_canvas/01_image.js:241:50
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async loadImageBitmap (file:///Users/daphnebogosian/Library/Caches/deno/npm/registry.npmjs.org/webgpu-utils/1.9.2/dist/1.x/webgpu-utils.module.js:5936:12)

[Hajime-san]

The enhancement of createImageBitmap API is going here.
If this PR will shipped, basic jpeg will be available.

• feat(ext/canvas): enhance createImageBitmap specification compliance #25517

[lucacasonato]

We do not set content-type for local file fetches. This is documented here, and is expected behaviour: https://docs.deno.com/runtime/reference/web_platform_apis/#fetching-local-files