I’m trying to replace a the content of an image URL with the result of a custom protocol. The idea is to get the data from a zip file.
The img element looks something like this:
<img src="custom:container:path">
where container represents the zip file and path the path within the zip file.
To register the protocol I have something like this in my main.js:
protocol.registerStringProtocol(
'custom',
(request, callback) => {
let [dummy, action, data] = request.url.split(/:/);
window.webContents.send('CUSTOM', action, data);
},
error => {}
);
In the renderer, I have the following:
ipcRenderer.on('CUSTOM', async (event, container, path) => {
console.log(`${container} : ${path}`); // this is correct
let data = await container.get(path); // the binary data is correct
// what do I do here?
return data;
});
where zipData.get() reads the binary data from the zip file.
I have already tested the code for getting the zip data and it correctly retrieves the binary data. However, the data isn’t properly displayed in the img element.
Reading the sample in https://www.electronjs.org/docs/latest/api/protocol I get the impression that it’s sufficient to return the binary data, but that doesn’t work. I’ve tried variations on using a Blob, such as:
let blob = new Blob([data], { type: 'image/png' });
let url = URL.createObjectURL(blob);
return url;
but that doesn’t help either.
How can I generate the virtual image?
.registerBufferProtocol()/.handle()?