worker中加载解码图片须用fetch()获取arraybuffer后调createimagebitmap()，传回主线程时必须将imagebitmap显式列入transfer列表，否则报错；离线需service worker缓存兜底。
Worker 里不能直接操作 <img> 或 <canvas></canvas>，图像处理必须走像素数组或 ImageBitmap 两条路径——选错就卡死主线程或报 transfer 错误。
Worker 中怎么加载并解码图片
Worker 没有 DOM，不能用 new Image()，也不能读本地 file:// 路径。必须用 fetch() 拉二进制数据，再交给 createImageBitmap() 解码：
-
fetch()需带{ mode: 'cors' }（跨域图）或确保服务端返回Access-Control-Allow-Origin: * - 响应必须调
response.arrayBuffer()，不能用response.blob()——后者会触发额外解码，失去零拷贝优势 -
createImageBitmap(arrayBuffer, { resizeWidth: 800, resizeHeight: 600 })返回 Promise，options 支持裁剪、缩放、格式转换（如premultiplyAlpha: false） - 若图来自 base64，先用
atob()+Uint8Array构造ArrayBuffer，再传给createImageBitmap()
ImageBitmap 怎么安全传回主线程
ImageBitmap 是可转移对象，但 transfer 必须显式声明，否则直接报错：
- 发送时：必须写
self.postMessage({ bitmap }, [bitmap]);——bitmap本身要进 transfer 列表，漏掉就触发"Failed to execute 'postMessage': ImageBitmap object is not transferable" - 主线程接收后，Worker 内的
bitmap引用立即失效，不能再读或 transfer 第二次 - 主线程拿到后，优先用
canvas.transferFromImageBitmap(bitmap)渲染（比drawImage()少一次像素复制，尤其对离屏 canvas 更快） - 别试图在主线程再调
createImageBitmap()转换它——已解码，直接用
用 Uint8ClampedArray 做滤镜计算要注意什么
如果要做灰度、模糊、锐化等像素级修改，ImageBitmap 不够用，得回到原始像素数组：
- 主线程从 canvas 提取：
const imageData = ctx.getImageData(0, 0, width, height); const pixels = imageData.data;，然后postMessage({ data: pixels, width, height }, [pixels.buffer]) - Worker 中必须校验长度：
if (data.length !== width * height * 4) throw 'pixel array length mismatch'——Canvas 像素严格是 RGBA 四通道，少一个字节就错位 - 遍历时用
i += 4跳步，别用for (let i = 0; i 然后手动算偏移，容易越界 - 不要在 Worker 里 new 大数组存中间结果；复用传入的
data，原地改，完事直接发回
离线环境下 Worker 图片处理怎么兜底
Service Worker 和图像 Worker 是两层事：前者管资源是否可访问，后者管计算是否能跑。离线时最容易崩在第一步——fetch() 直接失败：
- Worker 内
fetch()必须配合 Service Worker 的fetch事件拦截，提前把图缓存进CacheStorage，否则离线 fetch 必然 reject - 主线程发起处理前，先检查
navigator.onLine并预判：若离线，只允许处理已缓存 URL（比如从caches.match()拿到的 response） - Worker 内部加 try/catch 包裹
createImageBitmap()，失败时postMessage({ error: 'decode failed' })，主线程降级为显示占位图或提示 - 别依赖
file://协议测试——Service Worker 注册不了，fetch()也会被浏览器拦截，必须起本地 server（如python -m http.server）
真正卡住人的从来不是算法，而是 transfer 列表漏写、CORS 没配、离线时 fetch 没兜底这三处——它们不会报语法错误，只会让画面空白或控制台静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
