从 wasm 修改画布

Posted 2023-03-24

【中文标题】从 wasm 修改画布

【英文标题】：Modify canvas from wasm

【发布时间】：2017-08-05 23:19:57

【问题描述】：

是否可以有效地从 web 程序集修改 html5 画布？

更新：

var imageData = context.getImageData(x, y, w, h)
var buffer = imageData.data.buffer;  // ArrayBuffer

如果缓冲区是可写的，可能就是这样。

【问题讨论】：

Using WebAssembly to call Web API methods的可能重复

您收到该错误是因为您忘记写下情况和尝试过的内容。没有任何研究证据，一句话问你的问题是不够的

【参考方案1】：

不，不在 WebAssembly 和 web-api 开发的这个阶段。 使用context.getImageData，您将获得一个新的ImageData 对象，该对象具有一个新的缓冲区，该缓冲区必须再次复制到您的WebAssembly 实例的内存缓冲区中。 但是如果你不需要从画布中读取，只需要写入，你可以在你的 WebAssembly 实例的内存中分配ImageData.data。使用 ImageData 构造函数

imageData = new ImageData(new Uint8ClampedArray(waInstance.export.memory.buffer, byteOffset, width*height*4), width, height)

imageData 有一个指向您的数据的指针。在每次渲染时，在 WebAssembly 中进行工作并在 context.putImageData(imageData) 中使用相同的 imageData，每个周期只进行一次大数据复制。

【讨论】：

那么你将如何在这里确定byteOffset 的期望值？

两年后我们在 wasm 中无法从画布上读取，是否仍然如此？

还没有。从第 3 阶段的 github.com/WebAssembly/proposals 开始是“引用类型”，但您仍需要复制字节和“大容量内存操作”，这将加快复制过程。

【参考方案2】：

WebAssembly 实例通常有一个线性内存区域，它作为数组缓冲区暴露给 javascript API。这既可以在 JS 中分配并在创建 WebAssembly 实例时传入，也可以由 WebAssembly 实例创建并导出到 JS 代码中。无论哪种方式，arraybuffer 都可用于有效地将数据复制到 Canvas 元素中或从中复制出来（使用 createImageData、getImageData 和 putImageData）。

【讨论】：

所以要复制内存，效率不如直接写入位图，对吧？

@Anona112 我怀疑你现在需要复制（TypedArray.of 和/或 TypedArray.set 应该非常有效）。我怀疑在某些时候类似于结构化克隆的方法可以在 Canvas 和 WebAssembly 之间使用（这实际上现在可能有效，但如果有效，则没有很好的文档记录）

【参考方案3】：

无论如何，您必须将像素复制到WebAssembly.Memory 实例。然后修改并复制回来。 我不知道为什么，但是Uint8Array.set() 在最新的 Chrome 中并不快。最好将数据重铸成32位（new Uint32Array(your_uint8array)），然后用Uint32Array.set()复制。 请记住，canva 的.getImageData()/.setImageData() 并不快。可能是因为他们做了 alpha 预乘和其他事情。

总结一下：你最大的速度损失将在 .getImageData/.setImageData 中，这是无法避免的。其他事情有解决方法。

如果和优化的 JS 相比，wasm 会给你 10-20% 的好处，不会太多。

【参考方案4】：

我知道解决方案已被接受，但如果其他人来到这里寻找替代方案，我还是会发布。

我没有积极参与 Rust 的 wasm-bindgen 工具的开发，但它目前能够通过 web-sys crate 修改 canvas 元素。下面显示的代码取自 wasm-bindgen 书籍页面上的链接。

use std::f64;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;

#[wasm_bindgen(start)]
pub fn start() 
    let document = web_sys::window().unwrap().document().unwrap();
    let canvas = document.get_element_by_id("canvas").unwrap();
    let canvas: web_sys::HtmlCanvasElement = canvas
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .map_err(|_| ())
        .unwrap();

    let context = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .unwrap();

    context.begin_path();

    // Draw the outer circle.
    context
        .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the mouth.
    context.move_to(110.0, 75.0);
    context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap();

    // Draw the left eye.
    context.move_to(65.0, 65.0);
    context
        .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the right eye.
    context.move_to(95.0, 65.0);
    context
        .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    context.stroke();

canvas 对象可以从被转换成 web-assembly 的 rust 代码访问。调用 Web 汇编代码的方法有很多种，但本示例建议使用包含这些内容的 index.js 文件和 webpack 之类的打包器。

import("path/to/wasm/canvas/code").catch(console.error)

有关此链接的端到端演示，请点击此链接作为参考。

canvas hello world

【讨论】：

我相信这只会让 WASM 调用生成的 JavaScript 函数，该函数执行 Canvas API 调用。