Javascript Webworker OffscreenCanvas绘制规则图像

Webworkers可以通过

XMLHttpRequest

获取常规图像，对吗？工人们怎样才能把这些图像画到克里恩河流域以外的地方呢？可能要使用

XMLHttp.responseType='blob'

另一种方法是设置image元素的

src

，然后将元素传输给worker，但是我的worker总是拒绝这样的图像

谢谢

我们的网站就是为了这个目的而来的

注意：此演示目前仅在Chrome上运行。。。

const offcanvas=canvas.transferControlToOffscreen（）；
const-worker=新工作者（getWorkerURL（））；
worker.onmessage=e=>console.log（e.data）；
worker.postMessage（offcanvas，[offcanvas]）；
函数getWorkerURL（）{
返回URL.createObjectURL(
新斑点([
worker_script.textContent
])
);
}

onmessage=async（evt）=>{
试一试{
const canvas=evt.data；
const ctx=canvas.getContext（'2d'）；
如果（！ctx）{
postMessage（“不支持的浏览器”）；
返回；
}
const imgblob=等待获取（'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg')
.然后（r=>r.blob（））；
const img=wait createImageBitmap（imgblob）；
ctx.drawImage（img，0,0，canvas.width，canvas.height）；
}
捕获（e）{
postMessage（“不支持的浏览器”）；
投掷e；
}
};

谢谢。我想你错过了

r.blob（）

之前的

return

。除此之外，我注意到经过几百次迭代（即使只有一张图像）后，内存消耗巨大。如果我排除画布，那么内存至少会自动释放自己。您能建议如何使用canvas解决内存问题吗？不，只包含一条语句的arrow函数不需要返回。至于你的记忆问题，我不知道你是什么意思。。。你能安装一个新的吗？但请注意，这是很正常的，它需要内存（像素必须存储在某个地方），但它应该在GC进入后释放自己（如果有足够的内存，这可能永远不会发生）。如果我们注释掉

drawImage

，则RAM将恢复正常。这很可悲，因为使用具有多个

offscreencavas

的工人没有任何好处。即使我将屏幕外的信息传递给worker，ram也会保持不变。（）@Itoy当然需要内存，您正在初始化120个2000x2000px画布！这大约是4*4*8*2000*2000，每个画布的原始图像数据为5MB，每次迭代创建一个新的ImageBitmap。Web工作者只允许在其他CPU线程中运行脚本，但他们并不神奇，仍然需要分配内存。第二把小提琴使用300x150px画布（每个画布500KB），浏览器每次都使用相同的位图（因为缓存）。first fiddle的一个更公平的版本是，但显然它仍然会消耗内存。