ImageBitmap 是 HTML5 提供的高性能图像数据对象，支持跨线程零拷贝传递与高效渲染；需通过 fetch 获取二进制数据并调用 createImageBitmap() 生成，再用 postMessage(..., [bitmap]) 转移至主线程，最后通过 transferFromImageBitmap() 渲染。
ImageBitmap 是 HTML5 提供的高性能图像数据对象，支持在主线程和 Worker 中高效传递与渲染，避免了传统 Image 对象的解码阻塞和跨线程序列化开销。在 Worker 中处理图像（如缩放、裁剪、滤镜）并传回主线程，核心在于利用 createImageBitmap() 生成可转移的 ImageBitmap，再通过 postMessage() 的 transferable 机制零拷贝传递。
Worker 中加载并生成 ImageBitmap
Worker 不能直接使用 new Image() 或操作 DOM，需通过 fetch() 获取图像二进制数据，再调用 createImageBitmap() 解码：
- 用
fetch(url)获取图像响应，调用response.arrayBuffer()得到原始字节 - 传入
createImageBitmap(arrayBuffer, options)，例如指定尺寸或裁剪区域：{ resizeWidth: 320, resizeHeight: 240 } - 该方法返回 Promise，成功后得到可转移的
ImageBitmap实例（注意：必须在支持 transfer 的上下文中调用，现代浏览器均支持）
将 ImageBitmap 安全传回主线程
ImageBitmap 支持 Transferable 接口，可通过 postMessage(data, transferList) 零拷贝传递，主线程接收后原 Worker 中的引用自动失效：
- Worker 中发送：
self.postMessage({ type: 'image-ready', bitmap }, [bitmap]); - 务必把
bitmap加入 transfer 列表，否则会报错 “Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': ImageBitmap object is not transferable” - 主线程用
onmessage接收，event.data.bitmap即为可用的ImageBitmap，可直接赋给ctx.drawImage()或
主线程中渲染或进一步处理
收到 ImageBitmap 后无需重新解码，可立即用于绘制或转换：
- 若目标是 canvas，推荐用
canvas.transferFromImageBitmap(bitmap)（比drawImage()更高效，尤其对离屏 canvas） - 如需转成 Blob 或 URL，可用
createImageBitmap()+canvas.getContext('2d').drawImage()+canvas.toBlob()组合实现，但会触发一次重绘，非零拷贝 - 注意：ImageBitmap 一旦被 transfer，不可再次 transfer 或重复使用，主线程也仅能使用一次（除非显式克隆，但目前无标准克隆 API）
常见问题与注意事项
实际使用中容易忽略几个关键点：
- CORS 限制依然存在：fetch 图像时需确保服务端允许跨域，或设置
{ mode: 'cors' }并配合crossOrigin属性（若从 URL 创建） - 部分老旧 Android WebView 或 Safari 版本对
createImageBitmap的resize选项支持不完整，建议降级 fallback 到 canvas 绘制缩放 - Worker 中无法访问
window、document，所有资源需通过self.postMessage()传入（如图像 URL、配置参数），不可硬编码路径 - 内存管理：ImageBitmap 占用 GPU/内存资源，主线程使用完毕后应尽快释放（如不再持有引用，由 GC 自动回收；无显式
destroy()方法）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
