2016-12-09 99 views
1

有什么方法可以在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内部创建画布元素,或者找到降低图像质量的替代方法。

+0

尝试OffscreenCanvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas – defghi1977

+1

感谢,但请注意,在前面我的问题点中列出的第二点 – bergben

+0

目前还没有跨浏览器的方式还没有让Web工作人员操纵DOM – Viney

回答

0

使用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操作。

Canvas Web Worker Support

参考