web_sys::ImageData format

I want to use

so I need to construct a

My question is this:

What is the format of ImageData ? It says ClampedUint8Array -- but what is the encoding ? Is it r=u8, g=u8, b=u8, a=u8 ... or something else ? If something else, what is it?

Thanks!

Quoting the MDN documentation (link is in the rustdoc):

A Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive). The order goes by rows from the top-left pixel to the bottom-right.

2 Likes

Is there anything obviously wrong with:

    pub fn draw_texture(&self) {
        let b = self.canvas.borrow();
        let c: &web_sys::HtmlCanvasElement = &b.as_ref().unwrap();

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

        let image_data: web_sys::ImageData = web_sys::ImageData::new_with_u8_clamped_array_and_sh(
            Clamped(self.texture.data.as_ref()),
            Texture_Atlas::size as u32,
            Texture_Atlas::size as u32,
        )
        .unwrap();

        context.put_image_data(&image_data, 0., 0.).unwrap();

        web_sys::console::log_1(&"finished drawing texture".into());
    }

the web_sys::console::log_1 line executes, so all the unwraps succeeded. However, nothing is drawn to the canvas. The canvas is also not all white (because I can render it in WebGL and some thing renders.)

I added these two lines to see what the ImageData value is -- and it's definitely not 255, 255, 255, 255:

        web_sys::console::log_1(&image_data.into());
        web_sys::console::log_1(&"finished drawing texture".into());

From dev console:

ImageData {data: Uint8ClampedArray(16777216), width: 2048, height: 2048, colorSpace: 'srgb'}
data
: 
Uint8ClampedArray(16777216)
[0 … 999999]
[0 … 9999]
[0 … 99]
0
: 
100
1
: 
100
2
: 
255
3
: 
0
4
: 
100
5
: 
100
6
: 
255
7
: 
0
8
: 
100
9
: 
100
10
: 
255
11
: 
0
12
: 
100
13
: 
100
14
: 
255
15
: 
0
16
: 
100

So I am definitely calling putImageData, with non 255-255-255, yet the canvas is all white.

Looks like you have 0 in the alpha-channel. If you set texture.data[3] = 255, will you get a colored point at the top-left corner?

2 Likes

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.