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

Question

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

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

// Download a file
let blob = await fetch('https://whosebug.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 Storage时可以看到。如果我正确理解文件系统 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://whosebug.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://whosebug.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 的 add-on。没有直接从文档中阅读。

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

How do I pass a file/blob from JavaScript to emscripten/WebAssembly (C++)?

javascript

emscripten

webassembly