Passing ImageData via postMessage doesnt work on chrome

Question

EDIT:

It ended up being very relevant information that this only happens when the ImageDate comes from WASM, I dont know why this would matter. If anyone knows anything about this behaviour and can explain why this happens with WASM-originated ImageDatas only an answer would be highly appreciated.

I have been developing a website with no weird JS shenanigans, no weird libraries etc. But when trying to pass an ImgData object from a webworker to the main thread using postMessage in chrome, I get null on the other end.

ImageData is supposed to be supported by the structured clone algorithm which is what postMessage uses (postmessage docs). This works in Firefox, and doesnt give any crash/throw/warning in chrome, it just doesnt pass through the data.

console.log(ret); // properly displays the ImageData with data, width and height.
postMessage(ret); // no throw or anything

myWorker.onmessage =  function(e) {
    console.log(e); // e.data==null
    // use e.Data as ImageData, which crashes.
}

If I pass in just a random string for testing it does work properly. Does anyone know what could be going wrong here?

I have tried all the error events for webworkers, but non of them get called, so there is no

Answer 1

I don't know why Chrome isn't working but I suggest you try sending the underlying imageData.data array and the width and height separately.

const {data, width, height} = imageData;
postMessage({data, width, height})

You can then re-construct it at the receiving end.