Question Display screenshot in image

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:

Code (JavaScript):

1. var transaction = db.transaction(["FILE_DATA"], IDBTransaction.READ_WRITE);
2. transaction.objectStore("FILE_DATA").get("/idbfs/ef301f25d1b8e2bca70fafc1316f1a92/Screenshot").onsuccess = function (event) {
3. var imgFile = event.target.result;
4. var URL = window.URL || window.webkitURL;
5. var blob = new Blob( imgFile.contents, { type: "image/png" } );
6. var imgURL = URL.createObjectURL(blob);
7. var img = document.getElementById("screenshot");
8. 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:

 

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" } );

 

@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