超大图性能工程：如何在浏览器里流畅编辑 6000×4000 的照片
一张 6MB 的 JPEG，解码后是 96MB 的裸像素。本文从内存占用、浏览器 Canvas 尺寸上限、图像金字塔降采样和 Web Worker 并发等方面，说明如何流畅编辑超大照片并避免浏览器卡死。
高分辨率照片解码后会占用数百 MB 内存，这让低性能设备上的浏览器编辑变得困难。这篇文章会解释大图为什么昂贵、如何流畅处理，以及导出前需要检查什么。
为什么大图开销很大
未压缩图片每个像素占用四个字节。一张 6000x4000 的照片在内存中大约变成 96MB。预览、滤镜或撤销历史中的额外副本会进一步增加内存占用。
Canvas 与浏览器限制
浏览器有 Canvas 最大尺寸和内存限制。过大的画布可能失败或让浏览器不稳定。实际解决方案是在交互时使用降采样预览，只在需要时渲染全分辨率结果。
流畅编辑的技术
降采样预览
在交互过程中编辑并显示缩小版本。只在导出时应用最终处理。
Web Workers 与 OffscreenCanvas
把 CPU 密集型工作移到 Web Workers。OffscreenCanvas 可以在主线程之外进行绘制和处理，保持界面响应。
避免反复处理全尺寸图片
不要在每次滑块变化时重新编码整张图片。快速更新预览，导出时只运行一次完整流程。
管理内存
释放旧画布，避免保留多个全尺寸副本，并限制超大图片的撤销历史。
导出前检查
- 最终分辨率符合实际用途
- 预览和导出设置一致
- 滤镜应用在正确的分辨率上
- 文件格式和质量符合平台要求
- 导出的文件可以正常打开
大图处理清单
- 处理前先计算解码后的内存占用，便于规划。
- 交互预览保持降低分辨率。
- 把繁重计算放到 Web Workers，并尽量使用 OffscreenCanvas。
- 每一步完成后释放不再使用的对象 URL 和画布。
- 对超大文件限制撤销历史。
- 只在最终导出时按目标分辨率处理一次。
这份清单可以帮助你避免编辑大图时最常见的卡顿和浏览器崩溃问题。
常见问题
所有浏览器都能编辑 6000x4000 的照片吗？ 现代浏览器可以，但性能取决于内存和硬件。低性能设备可能会慢。
为什么编辑大图会变卡？ 解码、复制和过滤大像素缓冲区很消耗 CPU 和内存。请使用降采样预览和 Worker。
应该降低原始分辨率吗？ 只有当最终用途不需要时才降低。请保留原图，并按需要尺寸导出。
PictKit 能处理大图吗？ 可以。PictKit 使用预览、Worker 和高效渲染，在编辑大图时保持界面响应。