如何将文件/blob 从 JavaScript 传递到 emscripten/WebAssembly (C++)？

Question

我正在编写一个使用 emscripten 编译的 C++ 代码的 WebExtension。 WebExtension 下载我想在 C++ 代码中处理的文件。 我知道 文件系统 API ，我想我已经阅读了其中的大部分内容，但我没有让它工作 - 使下载的文件可以在 emscripten 中访问。

这是我的 WebExtension 的相关 JavaScript 部分：

// Download a file
let blob = await fetch('https://stackoverflow.com/favicon.ico').then(response => {
  if (!response.ok) {
    return null;
  }     
  return response.blob();
});

// Setup FS API
FS.mkdir('/working');
FS.mount(IDBFS, {}, '/working');
FS.syncfs(true, function(err) {
  if (err) {
    console.error('Error: ' + err);
  }
});

// Store the file "somehow"
let filename = 'favicon.ico';
// ???

// Call WebAssembly/C++ to process the file
Module.processFile(filename);

在检查浏览器的 Web 存储时，会创建目录，可以看到什么。 如果我正确理解文件系统 API，我必须“以某种方式”将数据写入/working的文件。 然后，我应该能够调用我的 C++ 代码的函数（来自 JavaScript）并打开该文件，就像在根目录中有一个名为“working”的目录一样，其中包含该文件。 C++ 函数的调用有效（我可以打印提供的文件名）。

但是如何将文件（当前为 blob）添加到该目录中？

C++代码：

#include "emscripten/bind.h"

using namespace emscripten;

std::string processFile(std::string filename)
{
    // open and process the file
}

EMSCRIPTEN_BINDINGS(my_module)
{
    function("processFile", &processFile);
}

Answer 1

事实证明，我在尝试不同的方法时混淆了一些东西，而且我也误解了我的调试工具。 因此，完成此任务的最简单方法（不使用 IDBFS）是：

JS：

// Download a file
let blob = await fetch('https://stackoverflow.com/favicon.ico').then(response => {
  if (!response.ok) {
    return null;
  }     
  return response.blob();
});

// Convert blob to Uint8Array (more abstract: ArrayBufferView)
let data = new Uint8Array(await blob.arrayBuffer());

// Store the file
let filename = 'favicon.ico';
let stream = FS.open(filename, 'w+');
FS.write(stream, data, 0, data.length, 0);
FS.close(stream);

// Call WebAssembly/C++ to process the file
console.log(Module.processFile(filename));

C++：

#include "emscripten/bind.h"
#include <fstream>

using namespace emscripten;

std::string processFile(std::string filename)
{
    std::fstream fs;
    fs.open (filename, std::fstream::in | std::fstream::binary);
    if (fs) {
        fs.close();
        return "File '" + filename + "' exists!";
    } else {
        return "File '" + filename + "' does NOT exist!";
    }
}

EMSCRIPTEN_BINDINGS(my_module)
{
    function("processFile", &processFile);
}

如果你想用 IDBFS 来做，你可以这样做：

// Download a file
let blob = await fetch('https://stackoverflow.com/favicon.ico').then(response => {
  if (!response.ok) {
    return null;
  }     
  return response.blob();
});

// Convert blob to Uint8Array (more abstract: ArrayBufferView)
let data = new Uint8Array(await blob.arrayBuffer());

// Setup FS API
FS.mkdir('/persist');
FS.mount(IDBFS, {}, '/persist');
// Load persistant files (sync from IDBFS to MEMFS), will do nothing on first run
FS.syncfs(true, function(err) {
  if (err) {
    console.error('Error: ' + err);
  }
});
FS.chdir('/persist');

// Store the file
let filename = 'favicon.ico';
let stream = FS.open(filename, 'w+');
FS.write(stream, data, 0, data.length, 0);
FS.close(stream);

// Persist the changes (sync from MEMFS to IDBFS)
FS.syncfs(false, function(err) {
  if (err) {
    console.error('Error: ' + err);
  }
});
// NOW you will be able to see the file in your browser's IndexedDB section of the web storage inspector!

// Call WebAssembly/C++ to process the file
console.log(Module.processFile(filename));

笔记：

• 在 JS 世界中使用FS.chdir()更改目录时，这也会更改 C++ 世界中的工作目录。 因此，在使用相对路径时，请尊重这一点。

• 当使用 IDBFS 而不是 MEMFS 时，您实际上仍在使用 MEMFS，并且只是有机会根据需要从 IDBFS 同步数据或向 IDBFS 同步数据。 但是您的所有工作仍然使用 MEMFS 完成。 我将 IDBFS 视为 MEMFS 的附加组件。 没有直接从文档中阅读。