在Web Worker中使用画布
有什么方法可以在Web Worker内部使用Canvas元素吗?我想在Web Worker内部做一个canvas.toBlob以降低图像质量。
在Web Worker中使用画布
- 我只知道的ImageData可以被传递到Web工人,这并不能帮助我,我需要的画布,而不是canvasContext做canvas.toBlob
- 我知道实验离屏画布在Firefox中,我也希望在其他浏览器中提供支持。
赞可能以某种方式通过https://github.com/substack/webworkify webworkify?哪个允许需要Web工作者内的其他库?
我要么需要将画布元素传递给Web Worker,要么在Web Worker内部创建画布元素,或者找到降低图像质量的替代方法。
使用OffscreenCanvas:
OffscreenCanvas对象用于创建渲染上下文,很像一个HTMLCanvasElement,但没有连接到DOM。这使得可以在工作者中使用画布渲染上下文。
一个OffscreenCanvas对象可能包含对占位符canvas元素的弱引用,该元素通常在DOM中,其嵌入内容由OffscreenCanvas对象提供。 OffscreenCanvas对象的位图通过调用OffscreenCanvas对象渲染上下文的commit()方法被推送到占位符canvas元素。所有可由OffscreenCanvas对象创建的渲染上下文类型都必须实现一个commit()方法。提交方法的确切行为(例如,是否复制或传输位图)可能会有所不同,正如渲染上下文各自的规范所定义的。本规范仅定义了屏幕外画布的2D上下文。
这是一个实验性功能,所以它隐藏在一面旗子后面。它受Firefox支持:
此功能位于功能首选项设置的后面。在about:config中,将gfx.offscreencanvas.enabled设置为true。
和Chrome:
此功能是一个标志后面。在Chrome://标志点击下实验帆布启用功能
对于工人使用的情况下,没有对DOM不存在依赖关系:
Web Workers是不是DOM依赖。它们处理纯数据,这使得它们特别适合需要很长时间执行的JavaScript代码。
只有Firefox支持ImageData操作。
参考
尝试OffscreenCanvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas – defghi1977
感谢,但请注意,在前面我的问题点中列出的第二点 – bergben
目前还没有跨浏览器的方式还没有让Web工作人员操纵DOM – Viney