Web Worker中Bitmaprenderer能否在OffscreenCanvas上正常工作？

核心原因是目标OffscreenCanvas的尺寸与生成的ImageBitmap不匹配。

ImageBitmapRenderingContext的transferFromImageBitmap方法是直接将ImageBitmap的像素数据替换到目标画布中，要求目标画布的宽高必须和ImageBitmap完全一致。如果两者尺寸不匹配，渲染结果会被静默处理（裁剪/拉伸或完全不显示），且不会抛出任何错误，这就是你遇到的“无视觉效果”的原因。

修复步骤 #

1. 在Worker中先同步源画布与目标画布的尺寸：

// 确保targetCanvas和originCanvas尺寸一致
targetCanvas.width = originCanvas.width;
targetCanvas.height = originCanvas.height;

2. 再执行bitmaprenderer的渲染逻辑：

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

为什么2d上下文的drawImage能正常工作？ #

2d上下文的drawImage方法会自动将源内容缩放适配目标画布的尺寸，即使两者尺寸不同也能显示内容，因此不会出现无视觉效果的问题。但这种方式需要额外的像素缩放计算，性能确实不如bitmaprenderer的直接帧传递高效。

内容的提问来源于stack exchange，提问作者Kruptein