Loading a set of images from an URL and displaying them in a canvas

I am trying to load (async) a set of images from URL and displaying them as they arrive in different parts of a canvas. Is there a working example for something similar to this that I can use as a starting point? I have tried the following

pub async fn fetch_image(url: String) -> Result<JsValue, JsValue> {
    let mut opts = RequestInit::new();
    opts.method("GET");
    opts.mode(RequestMode::Cors);

    let request = Request::new_with_str_and_init(&url, &opts)?;

    request
        .headers()
        .set("Accept", "image/png")?;

    let window = web_sys::window().unwrap();
    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;

    // `resp_value` is a `Response` object.
    assert!(resp_value.is_instance_of::<Response>());
    let resp: Response = resp_value.dyn_into().unwrap();

    // Convert this other `Promise` into a rust `Future`.
    let ab = JsFuture::from(resp.blob()?).await?;

    // Send the `Branch` struct back to JS as an `Object`.
    Ok(ab)
}

#[wasm_bindgen(start)]
pub fn start() {
    // canvas::draw_canvas()
    

    spawn_local(async {
        use web_sys::console; 
        let f = fetch::fetch_image("test.png".into()).await.unwrap_throw();
        console::log_1(&f);
        // This fails
        let ib1 : web_sys::ImageBitmap = f.dyn_into().unwrap_throw(); 
        // This seems to do nothing
        let ib2 : web_sys::ImageBitmap  = web_sys::ImageBitmap::from(f);

         // here I will use the `draw_image_with_image_bitmap` from `CanvasRenderingContext2d` 
    });
}

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.