在WebAssembly / Rust中编辑画布像素数据
Mat*_*son 5 rust html5-canvas webassembly
我在玩WebAssembly和Rust尝试创建画布像素数据。作为初始实验，我试图使Rust写入其线性内存，然后将其用于创建ImageData可以写入画布的对象。
底层ImageData是一个Uint8Array，其中每个像素是rgba的4个数字。我使用以下Struct将其表示为rust：
struct Pixel {
r: u8,
g: u8,
b: u8,
a: u8,
}
我已将一个函数导出到JavaScript，该函数将尝试为500 x 500像素的画布中的所有250,000像素着色：
#[no_mangle]
pub fn color(width: u32, height: u32) {
for i in 0..width * height {
let ptr = (i * 4) as u64 as *mut Pixel;
let mut pixel = unsafe { &mut *ptr };
pixel.r = 10;
pixel.g = 10;
pixel.b = 10;
pixel.a = 255;
}
}
这是前端对应的HTML / JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="500"></canvas>
<script>
const WIDTH = 500;
const HEIGHT = 500;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
fetch('/rotate.wasm')
.then((res) => res.arrayBuffer())
.then((ab) => WebAssembly.instantiate(ab))
.then(({ instance }) => {
instance.exports.memory.grow(100); // make memory big enough
instance.exports.color(WIDTH, HEIGHT);
const data = new Uint8ClampedArray(instance.exports.memory.buffer, 0, WIDTH * HEIGHT * 4)
const imageData = new ImageData(data, 500, 500);
ctx.putImageData(imageData, 0, 0);
});
</script>
</body>
</html>
结果是并非所有像素都是彩色的。顶部只有一部分：
当我检查WebAssembly内存时，我看到它看起来像是在大约42k像素后放弃了着色。
我想我找到了答案。不能保证线性内存的开头可供 JavaScript 使用。Rust 包含在 wasm 二进制文件中的运行时可以自由地写入该内存位置。我通过在我的程序中静态分配一块内存并返回一个指向 JavaScript 的指针来解决我的问题，这样它就知道在哪里可以安全地写入。
// Statically allocate space for 1m pixels
static mut PIXELS: [Pixel; 1_000_000] = [Pixel {
r: 255,
g: 0,
b: 0,
a: 255,
}; 1_000_000];
// return pointer to JavaScript
#[no_mangle]
pub fn get_memory_offset() -> i32 {
return unsafe { &PIXELS as *const _ as i32 };
}
动态分配内存也很好，但我不确定如何做到这一点。
您的代码从位置 0 开始将图像数据写入线性内存，您确定这样做安全吗？大多数语言在编译为 WebAssembly 时，都会在自己的运行时使用线性内存。
更安全的选择是创建一个代表图像的结构，然后从 JavaScript 代码中获取对此的引用，以便确保 JS 和 Rust 代码保持一致：
https://github.com/ColinEberhardt/wasm-rust-chip8/blob/master/web/chip8.js#L124
| 归档时间： |
|
| 查看次数： |
724 次 |
| 最近记录： |