javascript - 脚本:在HTML文件中显示图像

Question

我已经从c++文件构建了JS程序(带有emscripten)，该文件会生成png文件。

该程序在html文件中加载并执行。

现在，我想在此html文件中显示创建的png文件。但是Emscripten有一个模拟的沙盒文件系统，所以我的png文件是写在这个文件系统中的。

如何检索该文件以显示它？

Answer 1

您可以通过emoji File System API访问它。
假设您在C++中有一个函数可以返回生成的PNG文件的路径，如下所示:

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

在您的html中，添加一些js来读取文件，将其转换为blob，然后转换为对象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