How to consume a Uint8Array of Rust pointer in javascript

help
1

In my Rust lib I have the following:

#[wasm_bindgen]
pub struct Color {
    red: u8,
    green: u8,
    blue: u8,
}

#[wasm_bindgen]
pub struct Image {
    pixels: Vec<Color>,
}

#[wasm_bindgen]
impl Image {
    pub fn new() -> Image {
        let color1 = Color {
            red: 255,
            green: 0,
            blue: 0,
        };
        let color2 = Color {
            red: 60,
            green: 70,
            blue: 90,
        };
        let pixels = vec![color1, color2];
        Image { pixels }
    }

    pub fn pixels_ptr(&self) -> *const Color {
        self.pixels.as_ptr()
    }
}

======================================================
All compiles well, but when I try to use the Image in the Javascript code and draw a canvas in the Javascript part, the pixels array contains only 0's and not the Image colors:

import { Image } from '../pkg'

const memory = new WebAssembly.Memory({ initial: 256 })

const image = Image.new()
const pixelsPointer = image.pixels_ptr()

const pixels = new Uint8Array(memory.buffer, pixelsPointer, 6)

function numToHex(value) {
  const hex = value.toString(16)
  return hex.length === 1 ? `0${hex}` : hex
}

function drawPixel(x, y, color) {
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = `#${numToHex(color[0])}${numToHex(color[1])}${numToHex(
    color[2],
  )}`
  ctx.fillRect(x, y, 100, 100)
}

const canvas = document.createElement('canvas')
document.body.appendChild(canvas)
drawPixel(0, 0, pixels.slice(0, 3))
drawPixel(100, 0, pixels.slice(3, 6))

I need to find the way to consume the pointer values from Rust in the Javascript.

=====================================================

Also, the const pixelsPointer = image.pixels_ptr() in Javascript is of type number and not an array of numbers. And I don't understand this part: it's a vec![color1, color2]; on the Rust's side. Is it supposed to be an array on the Javascript side, so that an Uint8Array could be constructed?

3

I figured it out: we need to import memory from Rust and not assign new, empty memory on the JS side:

import { memory } from '../pkg/index_bg'

I guess things have been shuffled a bit in the new version of the rust-webpack template generator and the Rust exports are in a different place.

4

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.