浏览器端图像编辑器：把编辑操作组织成 Canvas 渲染流水线

本文依据个人图像编辑项目默认分支的编辑器状态、历史 hook、裁切面板和 Canvas 渲染模块做静态源码审阅。为保护项目边界，不写仓库名、品牌、私有依赖或配置，也不复制项目源码。审阅到的代码按浮动入口、侧栏编辑器和网页工作区划分交互面；这不代表扩展安装、所有格式或移动设备已经验收。

先保存编辑意图，再渲染像素

编辑器状态分别表达变换、调整、滤镜、标注、水印与颜色通道；变换又包含裁切、尺寸、旋转和翻转。历史模块提供 push、undo、redo 和可用状态。组件提交操作，状态层保存意图，渲染器从源图像重新合成结果。这样能避免每点一次滤镜就把有损预览当作新原图，减少反复压缩和误差累积。

源图 + 不可变编辑状态
  -> 映射裁切区域与输出尺寸
  -> 旋转、翻转和像素调整
  -> 滤镜、标注、水印
  -> 预览或导出

历史记录应保存有界的状态快照或操作，而非无上限复制完整分辨率位图。连续拖动滑块也应合并为一次可理解的历史动作，避免撤销要按数百次。

预览坐标要映射回原图

用户通常在缩小画布上拖动裁切框，因此预览坐标不能直接用于源图像。审阅到的实现分别按预览宽、高计算缩放比例，再叠加原裁切区域偏移，换算为原图坐标。这种显式映射比单一比例更能应对非等比布局和二次裁切。

项目要统一约定裁切矩形、旋转前后坐标、设备像素比与取整规则。建议把坐标换算提取为纯函数，覆盖零尺寸、边缘拖拽、非整数缩放、90/180/270 度旋转和重复裁切。不同面板不应各自维护略有差异的算法。

变换顺序是产品契约

渲染路径会基于裁切区域和目标尺寸计算画布，再处理旋转与水平/垂直翻转，并合成调整、滤镜、注释与水印。旋转时需要计算新的包围盒并平移原点，否则内容会绕左上角转出画布。哪些标注随图像翻转、水印在滤镜前还是后、旋转后文字大小如何解释，都需要明确产品定义。

预览可以限制最大边长以降低耗时，但导出必须根据原始像素和当前状态重新执行流水线，不能把缩小预览放大当作高清结果。使用 Blob URL 展示和下载输出后要撤销它；不要长期保留大型 Base64 字符串。导出格式不支持、浏览器解码失败或 Canvas 被跨域图像污染时，应显示具体失败原因并保留草稿。

大图与异步竞态

高分辨率文件会同时占用解码图像、临时画布、预览和历史内存。应按字节数、宽高和总像素设置上限，切换文件时释放旧 ImageBitmap、对象 URL 与临时资源。高频滑块可节流预览，最终导出则必须读取最新状态；旧文件的慢异步结果不能覆盖用户刚选的新文件。

可以评估 OffscreenCanvas/Worker，把重计算移出主线程，但需要按目标浏览器能力回退，并测试 Worker 错误、取消和终止。此次源码审阅没有确认存在 Worker、大图配额或完整资源释放保障，不能把建议写成已实现能力。

验收清单

1. 纯函数测试裁切映射、旋转包围盒、缩放取整与边界夹取。
2. 像素样图验证透明背景、调整、滤镜顺序、水印和标注方向。
3. 覆盖损坏文件、超限像素、跨域源、导出失败和快速连续切换。
4. 验证 Undo/Redo 粒度、异步结果取消和切页后的资源释放。
5. 在低内存手机实测触控拖拽、取消手势、旋屏与大图编辑。
6. 分别检查 PNG/JPEG/WebP 导出结果，unsupported 格式不可报告成功。

本次只读检查了个人项目的关键状态、裁切和渲染模块，没有安装依赖、构建扩展、运行图片用例或进行设备验证。上文把源码观察与工程建议分开，不能当作项目已通过测试的证明。

参考：MDN Canvas API、HTMLCanvasElement.toBlob、OffscreenCanvas、React 管理状态。