如何在本地加载 wasm 模块？

Question

我正在尝试使用 JavaScript 和 WebAssembly 制作一个简单、独立（只有一个 .html 文件和一个 .wasm 文件）的离线数据可视化。但是，我在从本地文件加载 WASM 模块时遇到问题。

第一个麻烦就是CORS。尝试加载任何具有亲戚或 file:// URL 的 JS 模块会导致我出现安全错误。在 Firefox 上，我设法禁用了本地 CORS，但这很讨厌而且过于宽松。在 Chrome，我需要用标志启动浏览器。从用户的角度来看，这些都不是初学者。有什么方法可以从本地文件加载 JS 或 WASM 模块而不运行遇到 CORS 问题？

绕过 CORS，第二个麻烦是虽然 Firefox 能够加载 JS 模块，但它无法加载 WASM 模块：（我的实际错误消息是日文的，但我认为这是英文的）'Loading failed for the ".wasm" with source'。没有显示更多信息。在 Chrome 上，错误消息是 'Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.'，这表明两个浏览器可能都无法猜测 MIME 类型。

这两个问题都可以通过设置 HTTP 服务器来解决，但这完全违背了拥有一个简单、独立的 file/files 的目的，它只需要浏览器运行。

有没有办法只用本地文件加载和调用 WASM？

Answer 1

您可以将 Wasm 二进制文件内联为 Uint8Array，并以这种方式对其进行实例化。不过，它只有在足够小的情况下才有效。如果 Wasm 超过 4KB，我相信你会得到一个错误。

// your Wasm file as a Uint8Array
const wasmSourceCode = new Uint8Array([0, 97, 115, 109 ...]);
const wasmModule = new WebAssembly.Module(wasmSourceCode );
const wasmInstance = new WebAssembly.Instance(wasmModule);

Answer 2

您可以将 wasm 编码为 base64，然后像这样加载它（据我所知没有大小限制 - 绝对适用于 5Mb+）

Module.wasmBinaryFile="data:application/wasm;base64,AGFzbQEAAAABww...

如何在本地加载 wasm 模块？

How to load a wasm module locally?

javascript

browser

webassembly