在Web Worker中使用Canvas

Question

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

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

也许通过https://github.com/substack/webworkify webworkify以某种方式？哪个允许在Web worker中需要其他库？

我需要将画布元素传递给Web Worker，或者在Web Worker中创建画布元素，或者找到降低图像质量的替代方法。

Answer 1

使用OffscreenCanvas：

  

OffscreenCanvas对象用于创建渲染上下文，非常类似于HTMLCanvasElement，但没有与DOM的连接。这使得在工作者中使用画布渲染上下文成为可能。

     

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

这是一个实验性功能，因此它隐藏在旗帜后面。 Firefox支持它：

  

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

和Chrome：

  

此功能位于旗帜后面。在chrome：// flags中，单击“实验画布特征”下的“启用”

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

  

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

只有Firefox支持ImageData操作。

<强>参考

• HTML5 Canvas: The OffscreenCanvas Interface

• OffscreenCanvas - Web APIs | MDN

• Web Workers | Tizen Developers

• Functions and classes available to Web Workers - Web APIs | MDN