Save image blob-object to local filesystem Javascript

Question

I have a blob object that I get from a canvas containing image. I change this blob to objectURL.

let myBlob = canvas.toBlob(function(blob) {...}, 'image/jpeg', 0.95);
let myUrl = URL.createObjectURL(myBlob);

I get a blob object url like: blob:file:///d324f-3fd4....

To get the location the file is saved, I try to request the filesystem at first before calling getDirectory method of DirectoryEntry object. However, I get the generic File not found in the directory error.

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
webkitRequestFileSystem(window.TEMPORARY, 2048*2048, resolve, errorHandler);
// doesn't resolve to any value

I searched everywhere in the AppData folder in Windows 10 but no temporary files were found there. My guess is that the blob exists only inside browser-memory and not actually saved in the temporary root folder of electron.

Answer 1

URL.createObjectURL doesn't save your file on the disk, it only creates a symlink.

In case of Blobs stored in memory (like your case), the symlink points to the memory, and holds the file in memory for as long as the session that created the symlink is alive.

In case of Files (gotten from user's input), the symlink points directly to the user's disk.

So in your case you can't access its location, because it only exists in memory.

Now, you can always store the Blob on fileSystem, but I'm not an Electron ninja, so I'll let you check others' answers : Save video blob to filesystem electron/node js