OffscreenCanvas 在 Worker 中不能直接 drawImage，必须通过主线程用 createImageBitmap() 创建并 transfer 到 Worker 的 ImageBitmap 才能绘制；截图 DOM 需借助 dom-to-image 等库转为 ImageBitmap；传回主线程需用 getImageData().data.buffer 转移或 createImageBitmap；模糊问题主因是未适配 devicePixelRatio，须由主线程计算并传递 dpr 值。
OffscreenCanvas 能不能在 Worker 里直接 drawImage？
不能，除非你传入的 ImageBitmap 是从 createImageBitmap() 同步解码得到的，或者由 transferFromImageBitmap() 转移而来。Worker 中无法访问 HTMLImageElement、canvas.toDataURL() 或任何涉及 DOM 的 API。常见错误是直接在 Worker 里写 ctx.drawImage(img, 0, 0) —— 这会静默失败或抛出 SecurityError（尤其跨域图）。
可行路径只有一条：主线程提前把图像数据准备好，转成 ImageBitmap，再用 postMessage(..., [bitmap]) 转移给 Worker。Worker 收到后才能安全调用 OffscreenCanvas.getContext('2d').drawImage(bitmap, ...)。
- 主线程必须用
createImageBitmap(blob || url || canvas)显式生成ImageBitmap，不能靠fetch().then(r => r.blob())后直接丢进drawImage - 转移时务必在
postMessage()第二个参数中传入[bitmap]，否则bitmap会被结构化克隆，导致 Worker 端无法绘制 -
OffscreenCanvas的width/height必须在 transfer 前显式设置，否则默认为 0×0，绘图无效
如何把整个网页 DOM 渲染成 OffscreenCanvas？
OffscreenCanvas 本身不支持直接“截图 DOM”，它没有 drawWindow 或类似接口。真实做法是：主线程用 html2canvas 或 dom-to-image 库将目标元素转成 canvas（或 Blob），再转成 ImageBitmap 发给 Worker；或者更轻量地，用 document.documentElement.cloneNode(true) + CSSStyleDeclaration 拷贝计算样式，但仅限静态快照，不支持 iframe、WebGL、video。
如果你用的是现代 Chrome/Firefox，且目标页面同源，可以考虑 element.captureStream() + canvas.captureStream() 配合 OffscreenCanvas.transferControlToOffscreen()，但这属于实验性路径，稳定性差，不推荐用于生产截图。
- 优先选
dom-to-image（比html2canvas更准确处理 CSS transform 和 font） - 调用
domtoimage.toBlob(element)后，立刻用createImageBitmap(blob)，别等URL.createObjectURL()再 fetch —— 多余且可能跨域失败 - 若目标含 SVG，注意
dom-to-image默认不渲染外部引用，需手动内联或预加载
Worker 中绘制完成后怎么高效传回主线程？
不能调用 offscreenCanvas.toDataURL()（Worker 中不可用），也不能用 canvas.toBlob()（OffscreenCanvas 没这个方法）。唯一标准方式是：用 OffscreenCanvas.getContext('2d').getImageData() 取像素数组，再用 createImageBitmap() 重建可转移对象，或直接 postMessage(imageData.data.buffer, [imageData.data.buffer]) 转移底层 ArrayBuffer。
性能关键点在于避免拷贝：如果主线程只需要显示，直接 transfer ImageBitmap；如果要保存为 PNG，Worker 里用 createImageBitmap() + imageBitmapToPng()（基于 encodeJpeg / encodePng WebCodec API）更省内存，但需检查浏览器支持（Chrome 94+，Firefox 100+）。
- 用
getImageData()时注意：返回的ImageData对象本身不可转移，但其.data.buffer可以 —— 别传整个ImageData - 如果主线程用
canvas.getContext('2d').putImageData()显示，记得先canvas.width = imageData.width，否则图像被拉伸 - WebCodec 编码 PNG 时，
encoder.encode(imageFrame)输入必须是ImageFrame，得用new ImageFrame(bitmap)包一层，不是直接传ImageBitmap
为什么截图模糊或尺寸不对？
根本原因几乎全是设备像素比（window.devicePixelRatio）没对齐。OffscreenCanvas 的 width/height 是 CSS 像素，但绘图上下文按物理像素渲染。例如在 2x 屏幕上，设 canvas.width = 800 实际分配 1600 物理像素，但若没缩放绘图坐标，内容就变小了；反之若忘了乘 dpr，图像就会模糊。
Worker 里拿不到 window，所以 dpr 必须由主线程计算好，随 ImageBitmap 一起发过去，并在 Worker 中用于设置 OffscreenCanvas 尺寸和绘图缩放。
- 主线程发送前：计算
const dpr = window.devicePixelRatio;，然后offscreen.width = targetWidth * dpr; offscreen.height = targetHeight * dpr; - Worker 接收后：用
ctx.scale(dpr, dpr)确保绘制内容按预期大小落位 - 若最终要导出为固定宽高的 PNG，别在 Worker 里 resize canvas，而应在主线程用
drawImage()缩放到目标尺寸 —— OffscreenCanvas 不支持resize
真正麻烦的是混合缩放场景：比如页面用了 transform: scale(0.8)，又开了 dpr=2，这时候光靠 canvas 缩放搞不定，得在主线程做 layout 测量并补偿偏移 —— 这类细节往往被忽略，结果截图边缘被切掉或留白。
