43

是否允许网络工作者访问画布对象？

4

3 回答 3

63

小更新，因为这个问题已经有半年多了：

在 Chrome/Chromium 6 中，您现在可以将画布的 ImageData 对象发送给网络工作者，让网络工作者对对象进行更改，然后使用putImageData(..)将其写回画布。

谷歌的Chromabrush就是这样做的，源代码可以在这里找到：

更新：

Opera (10.70) 和 Firefox (4.0b1) 的最新开发快照也支持将 ImageData 对象传递给 web worker。

2017 年更新：

来自 Github 的实际链接（更容易从中找到所需的文件Chromabrush）：

于 2010-07-12T13:47:07.173 回答
4

不。

postMessage 规范在几个月前进行了更新，以允许您发布 ImageData 对象，但目前还没有人实现该行为（我们都已经实现了）。canvas 本身的问题在于它是一个 DOM 元素，因此不能在 worker 中工作（没有 DOM）。

这是最近在 whatwg 或 web-apps 邮件列表中提出的，所以我怀疑我们将开始研究是否有可能在工作人员中提供类似 CanvasRenderingContext2D 的 api。

于 2009-12-08T05:18:03.333 回答
3

较新的浏览器支持OffscreenCanvas（请参阅该文档中的浏览器兼容性），这是一个在 web 工作者中运行的画布 2d 上下文，但会自动绘制到主线程。

以下是该 MDN 文档中的基本示例。

在主线程中，创建一个 OffscreenCanvas，然后将其发送给 worker：

var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js"); 
worker.postMessage({canvas: offscreen}, [offscreen]);

在工作线程中，使用屏幕外画布引用创建一个上下文，就像您通常在主线程上所做的那样，并执行您想要的任何绘图命令：

onmessage = function(evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // ... some drawing using the gl context ...
    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
};

（requestAnimationFrameAPI 存在于 worker 内部。）

于 2020-05-05T19:10:40.173 回答