如何使用Fabric.js保存画布元素状态并返回时恢复其位置？

一、toJSON() + localStorage是可行且推荐的方案 #

这种方式能完整保存画布的所有状态（包括图片位置、缩放、旋转、层级等），实现简单直接，完全满足你的需求。

保存数据的实现 #

在画布状态变更时（比如图片移动结束、元素增删后），调用toJSON()序列化画布数据并存入localStorage：

// 假设第一个画布实例为canvas1
function saveCanvasState() {
  const canvasJSON = canvas1.toJSON();
  localStorage.setItem('canvas1State', JSON.stringify(canvasJSON));
}

// 绑定图片移动结束事件触发保存
canvas1.on('object:modified', saveCanvasState);

加载数据的实现 #

切换回第一个画布时，调用loadFromJSON()从localStorage读取并恢复状态：

function loadCanvasState() {
  const savedState = localStorage.getItem('canvas1State');
  if (savedState) {
    canvas1.loadFromJSON(JSON.parse(savedState), () => {
      // 加载完成后刷新画布
      canvas1.renderAll();
    });
  }
}

// 切换回第一个画布时调用此函数
loadCanvasState();

二、更高效的轻量化方案（仅保存位置） #

如果你的需求仅需恢复图片的最后位置，不需要保存缩放、旋转等其他属性，可以只序列化图片的关键位置信息，减少数据存储量：

保存位置数据 #

function saveImagePositions() {
  const positions = canvas1.getObjects().map(obj => ({
    id: obj.id, // 给每个图片对象设置唯一id用于匹配
    left: obj.left,
    top: obj.top
  }));
  localStorage.setItem('canvas1ImagePositions', JSON.stringify(positions));
}

canvas1.on('object:modified', saveImagePositions);

加载位置数据 #

function loadImagePositions() {
  const savedPositions = localStorage.getItem('canvas1ImagePositions');
  if (savedPositions) {
    const positions = JSON.parse(savedPositions);
    canvas1.getObjects().forEach(obj => {
      const pos = positions.find(p => p.id === obj.id);
      if (pos) {
        obj.set({ left: pos.left, top: pos.top });
      }
    });
    canvas1.renderAll();
  }
}

总结 #

• 若需要完整恢复画布状态，优先用toJSON()+localStorage，实现成本低且兼容性好；
• 若仅需恢复位置，轻量化的位置存储方案更高效，数据量更小。

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