Display screenshot in image

Unity Engine
,
1

I want to display a screenshot taken by ScreenCapture.CaptureScreenshot in a img element on the html page, but i don’t know in what format it is saved in the indexed database and how to display that.
I’m reading the screenshot out of the db and create a blob to show via a ObjectURL:

var transaction = db.transaction(["FILE_DATA"], IDBTransaction.READ_WRITE);
transaction.objectStore("FILE_DATA").get("/idbfs/ef301f25d1b8e2bca70fafc1316f1a92/Screenshot").onsuccess = function (event) {
var imgFile = event.target.result;
var URL = window.URL || window.webkitURL;
var blob = new Blob( imgFile.contents, { type: "image/png" } );
var imgURL = URL.createObjectURL(blob);
var img = document.getElementById("screenshot");
img.setAttribute("src", imgURL);

Opening the object url gives me this error message:

Reading it from the db seems to work, it shows the correct timestamp, mode and contents length.

In the indexeddb the screenshot looks like this:

557×800 91.9 KB

2

The issue was the blob object
var blob = new Blob( imgFile.contents, { type: "image/png" } );
should be
var blob = new Blob( [imgFile.contents], { type: "image/png" } );

3

@MrMatthias

WebGL does not have a file system, but emscripten’s virtual file system uses IndexedDB to implement a file system.
You can create a .jslib file and access the FS object from the functions in it. Since this FS object is a virtual file system object, you can use it to read files stored in IndexedDB.

.jslib file document

emscripten File System document

Sample Page
Repository of Sample Page