How to transfer canvas to worker?

[serzhiio]

Is it possible to transfer canvas from main thread to worker using WorkerBridge?

[ranile]

Please see the example introduced by #371

[KevinNJ]

This method does not work for me. I can post a web_sys::File just fine, however when I change web_sys::File to a web_sys::OffscreenCanvas, post_message() fails and throws the following message: "failed to post message".

I think this might because post_message_with_transfer() needs to be called inside of gloo instead of post_message() to correctly transfer Transferable Objects, but I haven't proved it.

Testing was done on the latest version of Google Chrome.

The stack trace of the failure looks as follows:

Uncaught Error: failed to post message
    at imports.wbg.__wbindgen_throw (example_file_hash_app-28d34cf417833d2c.js:804:15)
    at wasm_bindgen::throw_str::h7d0621d4697cdf30 (example_file_hash_app-28d34cf417833d2c_bg.wasm:0x10817e)
    at <core::result::Result<T,E> as wasm_bindgen::UnwrapThrowExt<T>>::expect_throw::hca8c878f4d3d846d (example_file_hash_app-28d34cf417833d2c_bg.wasm:0xc1f0d)
    at <web_sys::features::gen_Worker::Worker as gloo_worker::actor::native_worker::NativeWorkerExt>::post_packed_message::he8d69ca3c579f982 (example_file_hash_app-28d34cf417833d2c_bg.wasm:0xe557b)
    at gloo_worker::actor::bridge::WorkerBridge<W>::new::{{closure}}::h9cd0f2c226e7061d (example_file_hash_app-28d34cf417833d2c_bg.wasm:0x10d46d)
    at gloo_worker::actor::bridge::WorkerBridgeInner<W>::send_message::h903ff62a5bd8bb3b (example_file_hash_app-28d34cf417833d2c_bg.wasm:0x903cc)
    at gloo_worker::actor::bridge::WorkerBridge<W>::send::h021ab807115c1dd7 (example_file_hash_app-28d34cf417833d2c_bg.wasm:0xe798c)
    at <example_file_hash::App as yew::functional::FunctionProvider>::run::inner::{{closure}}::h6222dd021858fa7c (example_file_hash_app-28d34cf417833d2c_bg.wasm:0xbc854)
    at yew::callback::Callback<IN,OUT>::emit::h1e7a3d8ecb837036 (example_file_hash_app-28d34cf417833d2c_bg.wasm:0xd9681)
    at <yew::html::listener::events::onclick::Wrapper as yew::virtual_dom::listeners::Listener>::handle::hef29ec9876a26bd7 (example_file_hash_app-28d34cf417833d2c_bg.wasm:0x105f2e)

I've created an minimal example which is based on #371.

lib.rs:

use gloo_worker::Spawnable;
use gloo_worker::{HandlerId, Worker, WorkerScope};
use serde::{Deserialize, Serialize};
use wasm_bindgen::UnwrapThrowExt;
use web_sys::HtmlCanvasElement;
use yew::prelude::*;

use crate::codec::TransferrableCodec;

pub mod codec;

#[derive(Serialize, Deserialize)]
pub struct CanvasInput {
    #[serde(with = "serde_wasm_bindgen::preserve")]
    pub canvas: web_sys::OffscreenCanvas,
}

pub struct CanvasWorker {}

impl Worker for CanvasWorker {
    type Input = CanvasInput;
    type Output = ();
    type Message = ();

    fn create(_scope: &WorkerScope<Self>) -> Self {
        Self {}
    }

    fn update(&mut self, _scope: &WorkerScope<Self>, _msg: Self::Message) {}

    fn received(&mut self, _scope: &WorkerScope<Self>, _msg: Self::Input, _id: HandlerId) {}
}

#[function_component]
pub fn App() -> Html {
    let worker = {
        use_memo(
            move |_| {
                CanvasWorker::spawner()
                    .encoding::<TransferrableCodec>()
                    .spawn_with_loader("/example_worker_loader.js")
            },
            (),
        )
    };

    let canvas_ref = use_node_ref();

    let onclick = {
        let canvas_ref = canvas_ref.clone();
        Callback::from(move |_| {
            let input = CanvasInput {
                canvas: canvas_ref
                    .cast::<HtmlCanvasElement>()
                    .unwrap_throw()
                    .transfer_control_to_offscreen()
                    .unwrap_throw(),
            };
            worker.send(input);
        })
    };

    html! {
        <div>
            <h1>{"To calculate file hash, please select a file below:"}</h1>
            <div><canvas ref={canvas_ref} /></div>
            <div><button {onclick} >{"Send Canvas"}</button></div>
        </div>
    }
}

canvas-example.zip

[jinleili]

I have also encountered the same issue, probably needing to implement a Codec, but I don't know how to write the Codec for web_sys::OffscreenCanvas.