如何修改React Canvas翻页应用的saveCanvas函数仅存当前画布内容

问题分析 #

当前saveCanvas函数会保存画布上的所有内容，包括handleCreateNewCanvas加载的旧画布参考层（通过loadSaveData(modifiedSaveData, true)传入的参考内容）。要实现仅保存当前画布的手绘内容，核心是在保存前过滤掉这些参考层元素。

解决方案 #

1. 在加载参考内容时，给参考层的线条添加唯一标识（比如isReference: true），方便后续识别过滤
2. 在saveCanvas中解析保存数据后，过滤掉带标识的参考线条，再重新序列化存入本地存储

修改后的代码 #

1. 更新handleCreateNewCanvas函数 #

handleCreateNewCanvas = () => {
  const saveData = localStorage.getItem('canvasSaveData');
  if (saveData) {
    const parsedData = JSON.parse(saveData);
    // 给参考线条添加专属标识，同时保留原有颜色修改逻辑
    parsedData.lines = parsedData.lines.map(line => ({
      ...line,
      isReference: true,
      brushColor: line.brushColor === "#444" ? "grey" : line.brushColor
    }));
    const modifiedSaveData = JSON.stringify(parsedData);
    localStorage.setItem("canvasSaveData", modifiedSaveData);
    this.canvasRef.current.loadSaveData(modifiedSaveData, true);
  }
};

2. 更新saveCanvas函数 #

saveCanvas = () => {
  if (this.canvasRef.current) {
    const saveData = this.canvasRef.current.getSaveData();
    const loadedSaveData = localStorage.getItem('canvasSaveData');
    const parsedData = JSON.parse(saveData);
    const loadedData = JSON.parse(loadedSaveData);

    // 过滤掉带参考标识的线条
    const filteredLines = parsedData.lines.filter(line => !line.isReference);
    const filteredSaveData = JSON.stringify({
      ...parsedData,
      lines: filteredLines,
      version: parsedData.version + 1 // 手动递增版本号，确保新数据优先保存
    });

    if (loadedData && parsedData.version > loadedData.version) {
      localStorage.setItem('canvasSaveData', filteredSaveData);
    } else if (!loadedData) {
      localStorage.setItem('canvasSaveData', filteredSaveData);
    }
  }
};

替代方案（无需新增标识） #

如果无法修改线条属性，可基于现有颜色逻辑过滤参考内容：

// 在saveCanvas中替换过滤逻辑
const filteredLines = parsedData.lines.filter(line => line.brushColor !== "grey");

内容的提问来源于stack exchange，提问作者willd