是否允许网络工作者访问画布对象？
网络工作者和画布
IT技术
javascript
html
html5-canvas
web-worker
2021-02-28 02:16:57
3个回答
小更新，因为这个问题现在已经半年多了：
在 Chrome/Chromium 6 中，您现在可以将画布的 ImageData 对象发送给网络工作者，让网络工作者对该对象进行更改，然后使用putImageData(..)将其写回画布。
谷歌的Chromabrush就是这样做的，源代码可以在这里找到：
更新：
Opera (10.70) 和 Firefox (4.0b1) 的最新开发快照也支持将 ImageData 对象传递给 web worker。
2017 年更新：
来自 Github 的实际链接（更容易从 中找到所需文件Chromabrush）：
不。
几个月前更新了 postMessage 规范以允许您发布 ImageData 对象，但目前还没有人实现这种行为（我们都在那里）。画布本身的问题在于它是一个 DOM 元素，因此在工作器中不起作用（没有 DOM）。
这是最近在 whatwg 或 web-apps 邮件列表上提出的，所以我怀疑我们将开始研究是否可以在工作人员中提供类似 CanvasRenderingContext2D 的 api。
较新的浏览器支持OffscreenCanvas（请参阅该文档中的浏览器兼容性），这是一个在 Web Worker 中运行的画布 2d 上下文，但会自动绘制到主线程。
以下是该 MDN 文档的基本示例。
在主线程中，创建一个 OffscreenCanvas，然后将其发送给一个工作线程：
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 存在于工作线程内部。）
其它你可能感兴趣的问题