通过 postMessage 传递图像数据在 chrome 上不起作用答案

【问题标题】：Passing ImageData via postMessage doesnt work on chrome通过 postMessage 传递图像数据在 chrome 上不起作用
【发布时间】：2020-12-17 12:51:08
【问题描述】：

编辑：

它最终成为非常相关的信息，只有当 ImageDate 来自 WASM 时才会发生这种情况，我不知道为什么这很重要。如果有人对这种行为有所了解并能解释为什么这种情况发生在源自 WASM 的 ImageDatas 中，那么我们将非常感谢您提供答案。

我一直在开发一个没有奇怪的 JS 恶作剧、没有奇怪的库等的网站。但是，当尝试使用 chrome 中的 postMessage 将 ImgData 对象从 webworker 传递到主线程时，我在另一端得到 null。

ImageData 应该由 structured clone algorithm 支持，这是 postMessage 使用的 (postmessage docs)。这在 Firefox 中有效，并且不会在 chrome 中给出任何崩溃/抛出/警告，它只是不传递数据。

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.
}

如果我只传入一个随机字符串进行测试，它确实可以正常工作。有谁知道这里可能出了什么问题？

我已经为网络工作者尝试了所有的错误事件，但没有一个被调用，所以没有

【问题讨论】：

你发送的是构造好的ImageData对象还是底层的imgData.data？ eta：看起来你正在发送整个东西，我建议尝试分别发送数组和宽度/高度
ImageData，如果我发送的 imgData.data 将只是 Uint8ClampedArray 支持 imageData 丢失大小，我可以尝试，我没有想到这一点。但如果这样行得通，为什么 ImageData 本身就行不通呢？编辑：这有效！我非常困惑为什么 jsut ImageData 不起作用，但是以某种方式分别传递缓冲区 + 大小并在主线程上重建它是有效的。如果需要，您可以将其发布为答案，我可以将其标记为解决方案
Works here for me in Chrome 87.0.4280.88 on macOs
是的，很奇怪，这也适用于我。我尝试将图像制作得非常大，看看是否是问题所在，但不是。我想我想通了，如果后备数组是在 wasm 中创建的，那么它就不起作用，但是如果我创建一个不受原始 wasm 缓冲区支持的新 ImageData，它就可以工作。编辑：在 JS 中复制后备缓冲区后，它确实有效。
那么您edit 您的问题呢？它包含了所有信息，并且可以得到面临相同问题的人的更多关注，并且可能会得到更好的答案/解决方案？

【解决方案1】：

我不知道为什么 Chrome 不工作，但我建议您尝试分别发送底层 imageData.data 数组和 width 和 height。

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

然后您可以在接收端重新构建它。

【讨论】：