Emscripten: Display an image in HTML file

Question

I've build JS program (with emscripten) from c++ files, which generates a png file.

This program is loaded and executed in a html file.

Now I would like to display the created png file in this html file. But Emscripten has an emulated sandboxed filesystem, so my png file is written in this filesystem.

How can I retreive this file to display it ?

Answer 1

You can access it through the emscripten File System API.

Let's assume you have a function in C++ that returns the path to your generated PNG file, something like this:

std::string processImage()
{
    std::string filename = "my.png";
    // open and write to your file
    return filename;
}

In your html, add some js to read the file, convert it to a blob and then to an object URL:

const filename = Module.processImage(); // Call your C++ function
const blob = new Blob([FS.readFile(filename)], {'type': 'image/png'});
const url = URL.createObjectURL(blob);
// You can use this url as the src attribute of an img element