在 Web Worker 中使用 Canvas答案

【问题标题】：Use Canvas in Web Worker在 Web Worker 中使用 Canvas
【发布时间】：2017-10-03 03:39:21
【问题描述】：

有没有办法在 Web Worker 中使用 Canvas 元素？我想在 Web Worker 中执行 canvas.toBlob 以降低图像质量。

我知道只有 ImageData 可以传递给 Web Worker，这对我没有帮助，我需要画布，而不是 canvasContext 来执行 canvas.toBlob
我知道 Firefox 中的实验性离屏 Canvas，但我也希望在其他浏览器中获得支持。

可能通过https://github.com/substack/webworkify webworkify 以某种方式进行？哪个允许在 web worker 中使用其他库？

我要么需要将 canvas 元素传递给 Web Worker，要么在 Web Worker 内部创建一个 canvas 元素，或者找到降低图像质量的替代方法。

【问题讨论】：

试试 OffscreenCanvas developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
谢谢，但请注意我的问题前面列出的第二点
目前还没有跨浏览器的方式来让 web worker 操作 DOM
你也可以使用canvas.toDataURL("image/jpeg",quality) 为什么要在worker上做，为worker启动一个新的上下文，解析javascript，传递像素数据可能需要更长的时间，然后是 jpeg 编码的非常慢的 javascript 实现，等等。到编码数据返回时，您可能已经使用本机调用完成了十几次。
有了 canvas.toDataURL 我仍然需要画布。我想在网络工作者中执行此操作，因为我递归调用它以创建一个函数，该函数将图像质量降低到刚好适合某个文件大小限制但不超过需要的程度，为此我创建了一个通常找到的算法2 到 5 步即可获得最佳质量...

标签： javascript canvas html5-canvas web-worker

【解决方案1】：

使用 OffscreenCanvas：

OffscreenCanvas 对象用于创建渲染上下文，很像 HTMLCanvasElement，但与 DOM 没有连接。这使得在工作人员中使用画布渲染上下文成为可能。

OffscreenCanvas 对象可能持有对占位符画布元素的弱引用，该元素通常位于 DOM 中，其嵌入内容由 OffscreenCanvas 对象提供。通过调用 OffscreenCanvas 对象的渲染上下文的 commit() 方法，将 OffscreenCanvas 对象的位图推送到占位符画布元素。可以由 OffscreenCanvas 对象创建的所有渲染上下文类型都必须实现 commit() 方法。提交方法的确切行为（例如，它是否复制或传输位图）可能会有所不同，这由渲染上下文的各自规范定义。本规范仅定义了屏幕外画布的 2D 上下文。

这是一项实验性功能，因此它隐藏在标志后面。火狐支持：

此功能位于功能首选项设置的后面。在 about:config 中，将 gfx.offscreencanvas.enabled 设置为 true。

和铬：

此功能位于标志后面。在 chrome://flags 点击 Experimental canvas features 下的 enable

对于工作用例，不依赖于 DOM：

Web Worker 不依赖于 DOM。它们处理纯数据，这使得它们特别适合需要很长时间执行的 JavaScript 代码。

只有 Firefox 支持 ImageData 操作。

参考文献

【讨论】：