如何将文件/ blob从JavaScript传递到emscripten / WebAssemblyC ++？

编程问答 2022-06-13

问题描述

我正在编写一个WebExtension，它使用用emscripten编译的C ++代码。 WebExtension下载我要在C ++代码中处理的文件。我知道File System 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);
}

解决方法

结果是，我在尝试不同方法的同时混合了一些东西，而且我还误解了调试工具。因此，完成此任务（不使用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,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,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的附加组件。没有直接从文档中读取内容。

emscriptenjavascriptwebassemblywebassembly