我正在尝试在Web工作者中使用OffscreenCanvas，并尝试各种策略。在我的原始代码中，我在一个requestAnimationFrame中顺序地绘制多个canvas元素（堆叠在彼此的顶部），并希望看看我是否可以使用webworkers并行地完成这一任务。
我目前的实验涉及调用canvas.transferControlToOffscreen()并将其传递给一个webworker。在同一个webworker中，我使用了一个单独的OffscreenCanvas，它没有附加到DOM，并希望使用bitmrenderer上下文将内容复制到传输的画布上，但我没有成功地让这个副本工作，而不使用其他上下文。
下面的代码可以使用：
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年前（Is 'bitmaprenderer' not a valid value for off-screen canvas rendering context in Chrome?）就有这个SO问题，这个问题已经解决了，因为当时Webworker上下文中不支持ImageBitmapRenderingContext，但正如在mdn（https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext）上所看到的那样，今天应该是这样。我的代码也没有在getContext请求上抛出错误，实际上返回了一个正确的ImageBitmapRenderingContext，而相关的SO问题确实抛出了错误。
1条答案
按热度按时间zzlelutf1#
是的，它应该工作，它在Firefox中。所以这是一个Chrome bug，它甚至可以在没有Worker的情况下复制：
既然已经报道了，你也无能为力了。
您已经找到了解决方法：使用2D上下文和
drawImage()。您也可以将ImageBitmap传输到主线程，并直接从HTMLCanvasElement创建位图渲染器，但即使主线程被锁定，您也无法更新占位符。但是，我必须指出，我对中间位图渲染器上下文的有用性有点怀疑。因为需要一个最终的上下文来获取
ImageBitmap，所以可以直接在占位符的OffscreenCanvas上调用该上下文，避免这些to-bitmap -〉transfer-from-bitmap步骤。