JavaScript ArrayBuffer 在通过 WASM 构造新的 Rust Vec 时“分离”答案

【问题标题】：JavaScript ArrayBuffer "detaches" when constructing a new Rust Vec via WASMJavaScript ArrayBuffer 在通过 WASM 构造新的 Rust Vec 时“分离”
【发布时间】：2018-08-02 17:33:23
【问题描述】：

基本思路是在每个视频帧创建Vec后，返回一个指针，然后使用指针显示图像：

JavaScript：

var ptr = exports.alloc(size);
let bytes = new Uint8ClampedArray(exports.memory.buffer, ptr, size);
let image = new ImageData(bytes, 320, 240);

function tick() {
    requestAnimationFrame(tick);
    ctx.drawImage(video, 0, 0, width, height);
    let imageData = ctx.getImageData(0, 0, width, height).data;
    bytes.set(imageData);
    exports.create_vector();
    ctx.putImageData(img, 0, 0);
}

生锈：

#[no_mangle]
pub extern "C" fn alloc(capacity: usize) -> *mut c_void {
    let mut buf = Vec::with_capacity(capacity);
    let ptr = buf.as_mut_ptr();
    mem::forget(buf);
    return ptr as *mut c_void;
}

#[no_mangle]
pub extern "C" fn create_vector() {
    let _: Vec<u8> = Vec::with_capacity(320 * 240);
}

Here is the actual code。

以下是错误消息：

铬：

Uncaught TypeError: Cannot perform %TypedArray%.prototype.set on a detached ArrayBuffer
    at Uint8ClampedArray.set (<anonymous>)
    at tick

Safari：

This webpage was reloaded because a problem occurred

Mozilla：

DOMException: "An attempt was made to use an object that is not, or is no longer, usable"

TypeError: Underlying ArrayBuffer has been detached from the view

罪魁祸首似乎是：

let bytes = new Uint8ClampedArray(exports.memory.buffer, ptr, size);
// ...
    exports.create_vector();
// ...

即，当我在调用exports.create_vector 后再次尝试使用ptr 时，浏览器崩溃。

这里出了什么问题？有解决办法吗？

【问题讨论】：

标签： javascript rust webassembly

【解决方案1】：

当您分配一个新缓冲区并且 WASM“进程”没有为它分配足够的内存时，浏览器将分配一个新的、更大的缓冲区并将所有数据从旧位置复制到其中。它在 WASM 解释器中是非常透明的，但是所有传递给 JavaScript 的指针（你用它来构造 Uint8ClampedArray）都会失效。据我所知，有两种解决方案：

在初始化时在 WASM“进程”中分配足够的内存并立即解除分配，这样只要内存使用量低于所选大小，指针就不会失效。
跟踪传递给 JavaScript 的缓冲区并“更新”此类错误的指针。

【讨论】：