在 Web Worker 中使用 Canvas
ber*_*ben 5 javascript canvas web-worker html5-canvas
有没有办法在 Web Worker 中使用 Canvas 元素？我想在 Web Worker 内部执行 canvas.toBlob 来降低图像质量。
- 我知道只有 ImageData 可以传递给 Web Worker，这对我没有帮助，我需要画布，而不是 canvasContext 来执行 canvas.toBlob
- 我知道 Firefox 中实验性的离屏 Canvas，但我也希望其他浏览器支持。
就像也许通过https://github.com/substack/webworkify webworkify 一样？哪个允许在网络工作者中需要其他库？
我要么需要将 canvas 元素传递给 Web Worker，要么在 Web Worker 内部创建一个 canvas 元素，要么找到一种替代方法来降低图像质量。
使用离屏画布：
OffscreenCanvas 对象用于创建渲染上下文，与 HTMLCanvasElement 非常相似，但与 DOM 没有连接。这使得在工作人员中使用画布渲染上下文成为可能。
OffscreenCanvas 对象可以保存对占位符画布元素的弱引用，该占位符画布元素通常位于 DOM 中，其嵌入内容由 OffscreenCanvas 对象提供。通过调用 OffscreenCanvas 对象渲染上下文的 commit() 方法，将 OffscreenCanvas 对象的位图推送到占位符画布元素。所有可由 OffscreenCanvas 对象创建的渲染上下文类型都必须实现 commit() 方法。提交方法的确切行为（例如，是否复制或传输位图）可能会有所不同，如渲染上下文各自规范所定义的那样。本规范中仅定义了屏幕外画布的 2D 上下文。
这是一个实验性功能，因此它隐藏在标志后面。火狐浏览器支持：
此功能位于功能首选项设置后面。在 about:config 中，将 gfx.offscreencanvas.enabled 设置为 true。
和铬：
此功能位于标志后面。在 chrome://flags 中，单击实验性画布功能下的启用
对于工作用例，不依赖于 DOM：
Web Worker 不依赖于 DOM。它们处理纯数据，这使得它们特别适合需要很长时间执行的 JavaScript 代码。
只有 Firefox 支持 ImageData 操作。
参考