在图片编辑器里撤销和重做很容易被误解成“把画布再画一遍”。真正需要设计的是一次用户操作到底记录什么恢复时哪些数据必须一起回滚以及连续操作后怎样处理历史分支。本文结合图片猫 www.piccat.cn 前端编辑器中的状态历史和蒙版像素历史拆开这几个问题。文中代码分为两类标注“项目代码摘录”的片段来自仓库当前实现“教学简化”片段只保留核心结构“建议方案”用于说明尚未在当前模块完整实现的重做或压缩策略。一 先把撤销对象定义清楚Canvas 只是最终的绘制表面。用户看到的旋转、裁剪、文字、滤镜、橡皮擦和马赛克可能分别存放在响应式状态、图层数组、笔画数组或另一个蒙版 Canvas 中。如果只保存主画布的 dataURL恢复时很难继续编辑文字和参数如果只保存几个参数又无法还原已经被像素化的笔画。我在项目里采用了两种记录模型ImageEditor 的通用编辑操作保存可序列化状态快照useImageCanvas 负责的蒙版绘制保存 ImageData。它们都叫 history但解决的是不同问题。二 项目中的状态快照把恢复所需的数据放在同一个入口项目代码摘录useEditorState.ts 的 pushHistory 会把编辑状态、文字图层、原图尺寸和原图地址一起写进历史栈。historyIndex 是游标当前游标之后的记录属于“可重做分支”。const pushHistory () {const snapshot JSON.stringify({state: state,textLayers: textLayers.value,origW: origW.value,origH: origH.value,originalImageSrc: originalImage.value?.src || null});if (historyIndex.value history.value.length - 1) {history.value history.value.slice(0, historyIndex.value 1);}history.value.push(snapshot);if (history.value.length maxHistory) history.value.shift();historyIndex.value history.value.length - 1;};这里有三个值得保留的细节。第一历史记录在操作完成后写入而不是每个 pointermove 都写入ImageEditor.vue 的 onCanvasMouseUp 会在拖动形状、文字、橡皮擦、马赛克或画笔结束时调用 _saveHistory。第二撤销后重新做一个新操作会先截断旧的重做分支。第三当前实现把历史上限设为 50 条避免历史无限增长。项目代码摘录恢复时不仅 Object.assign 状态还会在原图地址发生变化时异步重新加载图片。这个 await 很关键因为恢复动作结束前不能假设 Canvas 已经可以渲染。const applyHistorySnapshot async (index: number): Promisevoid {const snapshotStr history.value[index];if (!snapshotStr) return;const snapshot JSON.parse(snapshotStr);Object.assign(state, snapshot.state);textLayers.value snapshot.textLayers;if (snapshot.originalImageSrc snapshot.originalImageSrc ! originalImage.value?.src) {const img await loadImage(snapshot.originalImageSrc);originalImage.value img;}historyIndex.value index;};三 项目中的像素快照ImageData 适合蒙版和画笔对蒙版来说用户修改的就是 Canvas 像素。useImageCanvas.ts 在开始一次绘制前调用 getImageData 保存当前内容撤销时 pop 出上一份 ImageData再用 putImageData 写回画布。当前实现保留最多 10 份记录并提供 undo没有配套的 redo 栈。const saveHistory () {if (!ctx || !maskCanvas.value) return;history.value.push(ctx.getImageData(0, 0, maskCanvas.value.width, maskCanvas.value.height));if (history.value.length 10) history.value.shift();};const undo () {if (history.value.length 0 ctx maskCanvas.value) {const last history.value.pop();if (last) ctx.putImageData(last, 0, 0);}};这种方式的优点是实现直接尤其适合橡皮擦、马赛克、涂抹蒙版这类没有独立参数模型的操作。代价也明确RGBA 8 位像素大约按 width × height × 4 字节计算。一张 2000 × 1500 的画布单份快照约 12 MB10 份就是约 120 MB还没有算 JavaScript 对象和其他图像资源。实际占用还会受浏览器实现影响所以这里不应把估算当成性能测试结果。四 为什么不把所有历史都做成图片快照用 canvas.toDataURL 或 Blob 保存完整图片看起来统一但会把可编辑信息压扁成结果像素文字内容、滤镜参数、裁剪框和图层关系都无法自然恢复。dataURL 还会产生较大的字符串编码和解码也会带来额外开销。反过来只记录命令例如“旋转 90 度”“添加一层文字”需要保证命令可重放、版本兼容且顺序稳定。一旦命令依赖外部图片、字体或模型结果重放可能和第一次渲染不一致。方案记录内容适合场景主要风险操作记录命令及参数可重放的矢量编辑器命令版本和外部依赖复杂状态快照JSON 状态、图层和资源引用裁剪、旋转、文字、滤镜快照体积随状态增长像素快照ImageData 或图片 Blob画笔、蒙版、橡皮擦内存大难以编辑细节五 如果要补齐重做建议这样改下面是教学简化代码不是当前项目的完整替换实现。核心是把“撤销前状态”放入 undo 栈把撤销取出的状态放入 redo 栈一旦用户产生新操作redo 栈必须清空。type Snapshot ImageData;const undoStack: Snapshot[] [];const redoStack: Snapshot[] [];function commit(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {undoStack.push(ctx.getImageData(0, 0, canvas.width, canvas.height));redoStack.length 0;if (undoStack.length 10) undoStack.shift();}function undo(ctx: CanvasRenderingContext2D) {const previous undoStack.pop();if (!previous) return;redoStack.push(ctx.getImageData(0, 0, previous.width, previous.height));ctx.putImageData(previous, 0, 0);}function redo(ctx: CanvasRenderingContext2D) {const next redoStack.pop();if (!next) return;undoStack.push(ctx.getImageData(0, 0, next.width, next.height));ctx.putImageData(next, 0, 0);}真实项目还要补上尺寸变化、清空操作、图片替换、异步加载失败和组件卸载。像素历史和状态历史也不建议互相覆盖可以把它们包装成同一条“事务历史”每次事务同时记录 state 和 mask也可以在操作类型明确时分层撤销但界面必须让用户知道当前撤销的是哪一层。六 边界条件和验证清单当前代码核对结果ImageEditor 已有状态快照撤销与重做状态历史上限为 50撤销后新操作会截断重做分支useImageCanvas 的像素历史上限为 10当前只有撤销。上述结论来自源码阅读和对 pushHistory 分支截断、50 条上限的独立逻辑断言不等同于完整浏览器端回归测试。连续拖动只在一次手势结束后入栈避免 pointermove 产生数百条记录。撤销裁剪或换图时确认原图资源已经加载再触发最终渲染。撤销后新操作必须清空 redo否则重做会跳到已经不存在的分支。Canvas 尺寸改变后旧 ImageData 不能直接写入新尺寸需明确缩放或丢弃策略。跨域图片要正确配置 CORS否则 getImageData、toDataURL 可能抛出 SecurityError。用大图和移动端设备验证内存压力10 或 50 只是起始上限不是通用最佳值。把建议验收和已完成测试分开记录至少覆盖撤销、重做、分支截断、清空、换图和异步恢复失败。七 结语撤销与重做的关键不是选一个“最先进”的数据结构而是先判断编辑结果能否由状态重建。能序列化的编辑操作优先保存状态快照直接改像素的工具使用 ImageData 或压缩后的像素快照两者混合时用事务把多个子状态绑定在同一个历史节点上。图片猫当前代码已经把这两类路径分开这也为后续给蒙版工具补齐重做、压缩快照和更细的内存策略留下了清晰边界。参考MDN 关于 CanvasRenderingContext2D.getImageData()、putImageData() 和 HTMLCanvasElement.toDataURL() 的说明https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageDatahttps://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageDatahttps://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
