Fabric.js导出Canvas为JSON时导出Canvas对象的自定义属性

核心思路 #

Canvas原生序列化方法（如toDataURL()）仅处理绘图内容，要导出自定义属性，需手动收集这些属性并与Canvas绘图数据合并为完整的JSON对象，存入数据库后再反向恢复。

1. 给Canvas元素添加自定义属性 #

有两种常用方式，按需选择：

const canvas = document.getElementById('myCanvas');

// 方式1：使用dataset（符合HTML规范，适合DOM关联属性）
canvas.dataset.userId = '123';
canvas.dataset.elementType = 'chart';

// 方式2：直接挂载自定义对象（适合业务逻辑属性）
canvas.customMeta = {
  createdAt: new Date().toISOString(),
  theme: 'dark'
};

2. 导出包含自定义属性的Canvas JSON #

手动合并绘图数据与自定义属性，生成可存入数据库的JSON字符串：

function exportCanvasWithMeta(canvas) {
  // 获取Canvas绘图的base64数据
  const imageData = canvas.toDataURL('image/png');
  // 收集所有自定义属性
  const customProps = {
    dataset: {...canvas.dataset},
    customMeta: canvas.customMeta || {}
  };
  // 合并为完整导出对象
  const exportData = {
    imageData,
    width: canvas.width,
    height: canvas.height,
    customProps
  };
  // 转为JSON字符串返回
  return JSON.stringify(exportData);
}

// 使用示例：生成JSON后存入数据库
const exportJson = exportCanvasWithMeta(canvas);
// saveToDatabase(exportJson); // 替换为你的数据库存储逻辑

3. 从JSON恢复Canvas与自定义属性 #

解析存储的JSON，恢复绘图内容和自定义属性：

function restoreCanvasFromJson(jsonStr, targetCanvas) {
  const exportData = JSON.parse(jsonStr);
  
  // 恢复Canvas尺寸
  targetCanvas.width = exportData.width;
  targetCanvas.height = exportData.height;
  
  // 恢复绘图内容
  const ctx = targetCanvas.getContext('2d');
  const img = new Image();
  img.onload = () => ctx.drawImage(img, 0, 0);
  img.src = exportData.imageData;
  
  // 恢复自定义属性
  Object.assign(targetCanvas.dataset, exportData.customProps.dataset);
  targetCanvas.customMeta = exportData.customProps.customMeta;
}

// 使用示例：从数据库取出JSON后恢复Canvas
// const savedJson = getFromDatabase(); // 替换为你的数据库读取逻辑
// const restoredCanvas = document.getElementById('restoredCanvas');
// restoreCanvasFromJson(savedJson, restoredCanvas);

拓展：基于Fabric.js的实现（若使用Canvas库） #

如果用Fabric.js这类Canvas框架，可扩展其原生序列化方法自动包含自定义属性：

// 创建带自定义属性的Fabric对象
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red',
  // 自定义属性
  userId: '123',
  elementType: 'shape'
});

// 扩展Fabric的toJSON方法，指定要包含的自定义属性
fabric.Object.prototype.toJSON = (function(originalToJSON) {
  return function(propertiesToInclude) {
    // 合并默认属性与自定义属性列表
    propertiesToInclude = (propertiesToInclude || []).concat(['userId', 'elementType']);
    return originalToJSON.apply(this, [propertiesToInclude]);
  };
})(fabric.Object.prototype.toJSON);

// 导出整个Canvas的JSON（自动包含自定义属性）
const canvasJson = canvas.toJSON();
// 存入数据库后，恢复时直接调用：canvas.loadFromJSON(canvasJson)

内容的提问来源于stack exchange，提问作者Dharmesh N Tukadiya