HTML5中用Worker做图像重采样与缩放，核心是将像素计算移至Worker线程以避免主线程卡顿；通过转移ImageData.data.buffer实现零拷贝，Worker内按目标尺寸用区域重采样等算法计算新像素，主线程接收结果后用putImageData渲染。
在HTML5中用Worker做图像重采样与缩放，核心是把耗时的像素计算从主线程剥离，避免页面卡顿。Canvas本身不支持跨线程操作，所以不能直接把canvas或ImageBitmap传给Worker——但可以传ImageData的data（即Uint8ClampedArray）作为可转移对象，实现零拷贝传输。
Worker中处理图像数据的关键步骤
主线程先用ctx.getImageData()获取原始像素数据，再用structuredClone()或postMessage(..., [array.buffer])将data.buffer转移过去。Worker收到后，按目标尺寸重新采样：比如要缩放到1/4，就对每4×4源像素块取平均值（或加权平均），生成一个目标像素；若需更高质量，可用双线性插值或区域重采样算法，逐个计算每个目标像素对应的所有源像素贡献权重。
- 必须提前知道原图宽高、目标宽高、像素格式（RGBA）、是否带alpha通道
- 避免在Worker里做DOM操作或调用Canvas API，只做纯数组计算
- 输出结果仍是
Uint8ClampedArray，主线程用它新建ImageData再putImageData()
如何传递图像并启动Worker
主线程加载图片后，绘制到离屏canvas，再提取ImageData：
const offscreen = document.createElement('canvas').getContext('2d');
offscreen.canvas.width = img.width;
offscreen.canvas.height = img.height;
offscreen.drawImage(img, 0, 0);
const imageData = offscreen.getImageData(0, 0, img.width, img.height);
// 转移buffer，不复制内存
worker.postMessage({
data: imageData.data,
width: img.width,
height: img.height,
targetWidth: 320,
targetHeight: 240
}, [imageData.data.buffer]);
注意：imageData.data.buffer一旦转移，主线程原imageData就失效，不能再读写。
立即学习“前端免费学习笔记（深入）”；
Worker内实现区域重采样（推荐用于高质量缩放）
相比浏览器默认的简单下采样（只取左上角像素），区域重采样会遍历每个目标像素对应的源区域，累加所有覆盖的源像素加权值。例如缩放因子为0.3，则一个目标像素可能横跨3.3个源像素列，需按重叠面积分配权重。
- 用
Float64Array暂存中间结果，避免反复类型转换 - 对alpha通道单独处理（预乘或非预乘），防止颜色失真
- 缩放后数据仍为RGBA顺序，长度 =
targetWidth × targetHeight × 4
主线程接收结果并渲染
Worker计算完，把结果数组发回主线程：
worker.onmessage = e => {
const { data, width, height } = e.data;
const output = new ImageData(new Uint8ClampedArray(data), width, height);
ctx.putImageData(output, 0, 0); // 绘制到显示canvas
};
如果需要实时预览多个缩放比例，可复用同一个Worker，用message.port建立双向通信，避免重复创建开销。
