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();

}

}

};