Reading fetched Image throws error `ZeroLengthBlobNotPermitted`
brettkolodny opened this issue · comments
magick-wasm version
0.0.24
Description
When trying to load an image that was fetched via a URL the library throws ZeroLengthBlobNotPermitted. It seems to do this for all images I attempt to fetch. I'm unsure if this is actually an issue though or if it's simply not how you would go about implementing this code.
Steps to Reproduce
// https://github.com/lindsaykwardell/vite-elm-template/blob/main/src/assets/logo.png?raw=true
const url = "http://localhost:5173/src/assets/logo.png";
const res = await fetch(url);
const blob = await res.blob()
ImageMagick.read(blob, MagickFormat.Png, (image) => {
const canvas = document.getElementById("canvas");
image.writeToCanvas(canvas)
})Images
No response
The read method has no support for a Blob. You will need do do this instead:
const buffer = await blob.arrayBuffer();
ImageMagick.read(buffer , MagickFormat.Png, (image) => {I tried arrayBuffer() as well but got ImproperImageHeader. Are there any other examples of loading an image via fetch?
When you search for fetch in the discussions you will find this: #112
Doing the following works, thank you for the help!
const res = await fetch(nurl);
const buffer = await res.arrayBuffer();
const data = new Uint8Array(buffer);
ImageMagick.read(data, (image) => { ... }Whoops sorry I copied the wrong code... and good to hear that you fixed it.