OffscreenCanvas 与 Worker 图像批处理与 OPFS 持久化实践

概述将图像处理搬到 Worker 可避免阻塞主线程。本文示例使用 OffscreenCanvas 与 OPFS 完成批处理与持久化。能力检测与主线程入口const supportsOC = typeof OffscreenCanvas === 'function'; function startImageWorker(files) { if (!supportsOC) throw new Error('OffscreenCanvas unsupported'); const worker = new Worker('img-worker.js'); worker.postMessage({ type: 'process', files }); } Worker 端处理与写入 OPFS（img-worker.js）self.onmessage = async e => { if (e.data.type === 'process') { for (const file of e.data.files) { const bmp = await createImageBitmap(file); const canvas = new OffscreenCanvas(512, 512); const ctx = canvas.getContext('2d'); ctx.drawImage(bmp, 0, 0, 512, 512); const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 }); const root = await navigator.storage.getDirectory(); const fh = await root.getFileHandle(`thumbs/${file.name}.jpg`, { create: true }); const w = await fh.createWritable(); await w.write(await blob.arrayBuffer()); await w.close(); } } };