[SOLVED] URL.createObjectURL() not working properly

Issue

This Content is from Stack Overflow. Question asked by tomka

In my web extension I need to convert a file from a Blob to an array so I can store it in web extension storage.
However when I want to convert it back and use it as an image it doesn’t really work.

// converting to a normal array to store in storage
const myArray = Array.from(new Uint8Array(await myBlob.arrayBuffer()));
chrome.storage.local.set({image: myArray});

now from my background script:

const myArray = (await chrome.storage.local.get()).image;

console.log(URL.createObjectUrl(new Blob(Uint8Array.from(myArray), { type: "image/png" })));

The console.log produces a link which brings me to a white image, which is not what the image is. And I do know for sure that myArray transfers correctly through the storage since even if I try to do URL.createObjectURL() without storage it produces the same result.



Solution

I’m pretty sure it should be:

new Blob([Uint8Array.from(myArray)], { type: "image/png" })

instead of

new Blob(Uint8Array.from(myArray), { type: "image/png" })


This Question was asked in StackOverflow by tomka and Answered by Konrad Linkowski It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?