Bitmaprenderer 是否应该在网络工作者中的 OffscreenCanvas 上工作？

Question

我正在尝试在网络工作者中使用 OffscreenCanvas 并尝试各种策略。 在我的原始代码中，我在单个 requestAnimationFrame 中依次绘制多个画布元素（彼此堆叠），并希望看看我是否可以使用 webworkers 并行执行此操作。

我目前的实验涉及调用

canvas.transferControlToOffscreen()

并将其传递给网络工作者。在同一个 webworker 中，我使用一个单独的

OffscreenCanvas

未附加到 DOM，并希望使用 bitmaprenderer 上下文将该内容复制到传输的画布，但我无法在不使用不同上下文的情况下使该副本正常工作。

以下替代代码有效：

const targetCanvasContext = targetCanvas.getContext("2d")!;
targetCanvasContext.clearRect(0, 0, 1920, 1080);
targetCanvasContext.drawImage(originCanvas, 0, 0);

但是与我尝试通过执行以下操作直接使用 bitmaprenderer 传输 ImageBitmap 相比，这是相当多的工作：

const targetCanvasContext = targetCanvas.getContext("bitmaprenderer")!;
const bmp = originCanvas.transferToImageBitmap();
targetCanvasContext.transferFromImageBitmap(bmp);

然而，后者没有产生任何视觉结果，也没有抛出任何错误。

我在这里错过了什么？

3 年前有人问过这个 SO 问题（'bitmaprenderer' 不是 Chrome 中离屏画布渲染上下文的有效值吗？），该问题已解决，因为当时 ImageBitmapRenderingContext 在 webworker 上下文中不受支持，但正如在 mdn (https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext) 上所见，今天应该是这样的。此外，我的代码没有在 getContext 请求上抛出错误，实际上返回了正确的 ImageBitmapRenderingContext 而相关的 SO 问题确实抛出了错误。

Answer 1

是的，它应该可以工作，而且在 Firefox 中也可以。所以这是一个 Chrome bug，甚至可以在没有 Worker 的情况下重现：

const ctx = new OffscreenCanvas(300,150).getContext("2d");
ctx.fillRect(50, 50, 50, 50);
const bmp = ctx.canvas.transferToImageBitmap();
const placeholder = document.querySelector("canvas").transferControlToOffscreen();
placeholder.getContext("bitmaprenderer").transferFromImageBitmap(bmp);
// in Firefox you can see the black square, not in Chrome

<canvas></canvas>

鉴于它已经被报道，你能做的不多了。

您已经找到了解决方法：改用 2D 上下文和

drawImage()

。您也可以将

ImageBitmap

转移到主线程并直接从

HTMLCanvasElement

创建位图渲染器，但是即使主线程被锁定，您也将失去更新占位符的能力。

但是，我必须指出，我对此处的中间位图渲染器上下文的有用性持怀疑态度。由于您需要一个最终的上下文，您将从中获取

ImageBitmap

，您可以直接在占位符的

OffscreenCanvas

上调用该上下文，而只是避免这些到位图-> 从位图传输的步骤。