在 javascript 中，web worker 传递 imagebitmap 的核心做法是使用 transfercontroltooffscreen() 将 canvas 的控制权转移给 offscreencanvas，随后通过 postmessage 的第二个参数（transferable 列表）将该对象序列化并发送到 worker。这样做会将 imagebitmap 的所有权从主线程完全转移到 worker 线程，实现零拷贝的高效传输，避免内存重复占用。
如何创建可转移的 ImageBitmap 源
要获得可转移的对象，必须在主线程创建一个 HTMLCanvasElement，并调用其 transferControlToOffscreen() 方法。该方法返回一个 OffscreenCanvas 实例，这个实例包含了底层绘图上下文和像素数据的所有权，可以直接作为 Transferable 对象进行跨线程传递。
const canvas = document.getElementById('myCanvas');
// 获取控制权，生成可转移对象
const offscreen = canvas.transferControlToOffscreen();
// 初始化 Worker 并发送
const worker = new Worker('worker.js');
worker.postMessage(offscreen, [offscreen]);
上述代码展示了标准的初始化流程。首先通过 DOM 获取画布元素，接着调用 transferControlToOffscreen() 获取 OffscreenCanvas 句柄。最后在主线程调用 postMessage 时，必须将 offscreen 对象放入数组中作为第二个参数，这告诉浏览器执行“所有权转移”而非“结构化克隆”。一旦转移完成，主线程上的原始 canvas 变量将不再能用于绘图，所有操作需在 Worker 端进行。
立即学习“Java免费学习笔记（深入）”；
Worker 端如何接收与渲染图像
在 Worker 线程中，接收到的是 OffscreenCanvas 对象。开发者需要获取该对象的 2D 或 WebGL 上下文，然后使用 drawImage 或其他 API 对图像进行处理。处理完成后，如果需要将结果传回主线程，通常需要将处理后的内容绘制到一个新的 ImageBitmap 或通过 transferControlToOffscreen 再次转移（视具体场景而定，通常是将结果转为 Blob 或 Base64 传回，或者直接在 Worker 中渲染到屏幕）。这里演示如何在 Worker 中接收并绘制一个外部传入的 ImageBitmap。
// worker.js
self.onmessage = function(e) {
const bitmap = e.data;
// 假设我们有一个预先创建的 OffscreenCanvas 用于输出
const ctx = outputCanvas.getContext('2d');
// 绘制接收到的 ImageBitmap
ctx.drawImage(bitmap, 0, 0);
// 可选：将结果转回主线程（例如转为 Blob）
outputCanvas.convertToBlob().then(blob => {
self.postMessage(blob);
});
};
这段代码展示了 Worker 端的典型处理逻辑。当主线程发送 ImageBitmap 后，Worker 通过 onmessage 事件监听器接收数据。由于所有权已转移，这里的 e.data 是一个完整的、可用的 ImageBitmap 对象。开发者可以像在主线程一样使用 ctx.drawImage() 对其进行操作。如果最终目的是更新 UI，通常的做法是在 Worker 中将处理好的像素数据转换回主线程可识别的格式（如 Blob），或者利用 OffscreenCanvas 直接绑定到页面中的某个隐藏 Canvas 上（如果架构允许）。
ImageBitmap 传输时的内存变化与注意事项
在使用 ImageBitmap 进行跨线程通信时，最显著的特性是内存所有权的变化。主线程发送后，原内存区域被标记为无效，Worker 获得独占访问权。这种机制避免了传统 JSON 序列化或结构化克隆带来的巨大性能开销和内存翻倍问题。然而，这也意味着主线程在发送后不能再读取或修改该图像数据，否则会导致错误或异常。此外，ImageBitmap 支持异步解码，可以在 Worker 中高效地处理大型图片资源，非常适合图像处理密集型应用。
