使用 Web Workers 使用本机画布函数进行绘图

Question

可以将通过 getImageData 获取的 CanvasPixelArray 发送到工作脚本，并让工作脚本在其后台线程中操作像素，并最终将操作后的像素数组发回。

但是，我使用的是本机画布绘图函数，例如 drawImage。 drawImage 调用当前正在阻塞 UI 线程。这会导致按钮重绘缓慢，并且单击按钮时会出现明显的延迟，仅举几个缺点。 （编辑：现在可以使用 ctx.imageSmoothingEnabled = false 来完成一个小改进，至少在带有 webkit 前缀的 WebKit 上是这样。）

我想将绘图从使用 Web Workers 将主线程转换为后台线程。但是，我似乎无法将画布或上下文发送给工作人员。

我确实在 MDN 上找到了此通知：

注意：像往常一样，后台线程（包括工作线程）无法操作 DOM。如果后台线程采取的操作需要导致 DOM 发生更改，它们应该将消息发布回其创建者来完成这项工作。

但我想保持 DOM 不变；我只是想在画布元素上绘制东西。这可能吗，还是Web Workers真的只允许计算而不允许绘图？

（或者是否可以使用诸如drawImage之类的函数来操作CanvasPixelArray而不是在画布上绘图？）

Answer 1

[大约 5 年后编辑：其中一些开始发生变化，并且有新的 Web 平台功能实际上允许从 Worker 渲染到画布！有关更多信息，请参阅此博客：https://hacks.mozilla.org/2016/ 01/webgl-off-the-main-thread/ - 其余答案是为 2011 时代的信息提供的;)]

Web 工作人员只能计算，不能修改 DOM 或进行任何调用来绘制 帆布。然而，就像你说的，你可以将像素数组发布给网络工作人员以在那里处理它并将其发回。由于这是异步的，我不明白为什么这会导致 UI 线程变慢，除非您故意阻塞直到 Web Worker 响应（您不应该这么做）。

因此，您的 drawImage 调用花费了如此长的时间以至于影响了 UI，这似乎很奇怪。如今，大多数画布都是硬件加速的，因此它们应该可以很好地跳跃。我的猜测是，您正在通过 Web Worker 绘制画布像素数组每一帧，这实际上意味着您正在使用软件在 JavaScript 中渲染画布。 Javascript 仍然太慢，无法做到这一点 - 即使 C++ 软件渲染器也有点慢，这就是硬件加速很重要的原因。因此，您可以将某些内容渲染到网络工作者中的画布像素数组一次，然后当您获得结果时将其缓存到图像一次 >，然后根据需要将该 Image 绘制到画布上。那应该还是很快的。

编辑：您可能需要查看 WebGL，您可以在其中编写片段着色器，这些片段着色器是处理像素效果的有效小程序。它们完全在显卡上运行，所以速度快得离谱。

Answer 2

您可以将 ImageData 发布到 Web Worker，后者将处理后的 ImageData 发送回调用者（主 UI）线程。

例如：

1. 创建一个 Web Worker：

   this.renderer = new Worker("renderer.js");

2. 将从画布创建的 ImageData 发布到 Web Worker：

   var ctx = this.canvas.getContext('2d');
   var imageData = ctx.createImageData(宽度, 高度);
   this.renderer.postMessage({ image: imageData });

3. Do ImageData 操作Web Worker 并将其发布回主线程：

   onmessage = function(e) {
      varprocessedImage = self.doImageProcessing(e.data.image);
      postMessage({ 图像:processedImage });
   };

4. 将操作的ImageData设置到主线程中的画布：

   this.renderer.onmessage = function (e) {
      var ctx = this.canvas.getContext('2d');
      ctx.putImageData(e.data.image, 0, 0);
   }

Answer 3

有一个新的 API 可以执行此操作（当前仅在启用首选项的情况下在 Firefox 中受支持）。

请参阅 https://developer.mozilla.org/en-US/docs/ Web/API/OffscreenCanvas 和
https://hacks.mozilla.org/2016/01/ webgl-off-the-main-thread/.

Answer 4

[社区编辑：这个答案是在 2011 年编写并接受的。其他技术已经出现（或正在出现），可以让 Web Workers 和 Canvas 更好地共存；除了这个答案之外，读者还应该了解本页上的所有答案。]

您无法将画布对象或画布上下文传递给工作线程，因为画布是 DOM 的一部分。