如何利用HTML Worker实现离线图片处理？

本文共计913个文字，预计阅读时间需要4分钟。

在Worker中不能直接操作元素

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 < data.length; 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 没兜底这三处——它们不会报语法错误，只会让画面空白或控制台静默失败。