JS fetch获取文件二进制数据传入C编译WASM模块返回异常问题

代码返回0的核心原因是对WebAssembly的内存模型理解有误：
WebAssembly实例拥有独立的线性内存空间，和JavaScript引擎管理的JS堆内存完全隔离。C代码中定义的uint8_t* data参数本质是wasm线性内存中的整数偏移地址（即指针），直接把JS侧fetch返回的ArrayBuffer对象作为参数传入时，JS会将对象隐式转换为无效的整数偏移值，C代码实际读取的是wasm内存中未初始化的0值区域，自然计算结果为0。

要实现JS侧二进制数据传递到C侧，核心流程是：在wasm线性内存中申请一块足够存放数据的空间 -> 将JS侧的二进制数据拷贝到这块wasm内存中 -> 将该内存块的偏移地址（C侧可识别的指针）传入C函数 -> 处理完成后释放申请的内存。

编译注意事项 #

使用Emscripten编译C代码时，需要导出内存操作相关的函数，参考编译命令：

emcc your_code.c -o blob.wasm \
  -s STANDALONE_WASM=1 \
  -s EXPORTED_FUNCTIONS="['_malloc', '_free', '_display_file', '_sum_test']" \
  -s EXPORTED_RUNTIME_METHODS='["ccall"]' \
  --no-entry

C侧原有业务逻辑无需修改，保持原有实现即可。

修正后的JavaScript代码 #

// 初始化wasm导入对象，配置足够的线性内存，1页内存对应64KB空间
const wasmMemory = new WebAssembly.Memory({ initial: 256, maximum: 1024 }); // 初始16MB，最大64MB，可按需调整
var importObject = {
    imports: {
        display_file: function() {},
        sum_test: function() {},
    },
    env: {
        memory: wasmMemory
    }
};

function LoadWebAssembly(_fileName, _importObject) {
    WebAssembly.instantiateStreaming(fetch(_fileName), _importObject)
        .then(obj => {
            const wasmExports = obj.instance.exports;
            // 基础功能验证
            console.log(wasmExports.sum_test(12, 2));
            
            // 拉取服务端文件
            fetch("data")
            .then(response => response.arrayBuffer())
            .then(fileBuffer => {
                const dataLength = fileBuffer.byteLength;
                // 在wasm线性内存中申请对应大小的空间，返回C侧可识别的指针
                const dataPtr = wasmExports.malloc(dataLength);
                if (!dataPtr) {
                    throw new Error("wasm内存申请失败，请调大初始内存配置");
                }

                try {
                    // 基于wasm内存创建对应偏移的Uint8Array视图
                    const wasmDataView = new Uint8Array(wasmMemory.buffer, dataPtr, dataLength);
                    // 将JS侧拿到的文件二进制数据拷贝到wasm内存中
                    wasmDataView.set(new Uint8Array(fileBuffer));
                    
                    // 传入指针和数据长度，调用C侧处理函数
                    const result = wasmExports.display_file(dataPtr, dataLength);
                    console.log("文件字节累加结果：", result);
                } finally {
                    // 释放申请的wasm内存，避免泄漏
                    wasmExports.free(dataPtr);
                }
            })
            return obj;
        });
}

var dec_module = LoadWebAssembly("blob.wasm", importObject);

关键说明 #

• 禁止直接将JS侧的ArrayBuffer、TypedArray等JS堆对象作为指针参数传入wasm函数，这类对象不属于wasm线性内存地址范围，C侧无法正确访问
• 申请的wasm堆内存使用完成后必须手动调用free释放，否则会持续占用wasm线性内存
• 处理大文件时请提前调大WebAssembly.Memory的初始/最大页数配置，避免内存不足
• 如果使用Emscripten提供的JS胶水代码，可以直接使用内置的ccall/cwrap接口，会自动完成内存申请、拷贝、释放流程，无需手动操作指针

内容的提问来源于stack exchange，提问作者LucioleMaléfique