FabricJS如何让canvas.toObject()包含所有属性及查询默认忽略属性列表

1. 如何让canvas.toObject()包含全部对象属性 #

FabricJS的toObject()采用白名单机制实现序列化，并非主动过滤属性，而是仅输出预先定义的指定属性，因此没有官方的「关闭属性过滤」开关，可根据业务场景选择以下两种方案：

方案1：按需追加序列化属性（更推荐） #

直接修改对应类原型的stateProperties数组，把需要序列化的属性追加进去即可，比你当前重写toObject的方案更简洁：

// 全局给所有Fabric对象追加需要序列化的属性，把你需要的属性全部列在数组中
fabric.Object.prototype.stateProperties = fabric.Object.prototype.stateProperties.concat([
  'uuid', 'rt_attributes', 'borderColor', 'cornerStyle'
])

如果不需要全局生效，也可以单次调用时传入需要额外包含的属性：

// 仅本次序列化包含指定额外属性
const canvasData = canvas.toObject(['uuid', 'rt_attributes', 'borderColor'])

方案2：全量输出所有属性 #

如果确实需要包含对象的全部属性，可以重写toObject原型方法直接遍历输出所有自有属性：

fabric.Object.prototype.toObject = function() {
  const allProperties = {}
  // 遍历对象所有自有可枚举属性，排除下划线开头的内部私有属性，不需要过滤可删掉第二个判断条件
  for (const key in this) {
    if (this.hasOwnProperty(key) && !key.startsWith('_')) {
      allProperties[key] = this[key]
    }
  }
  return allProperties
}

注意：该方案会大幅增加序列化后的JSON体积，若对象包含函数、循环引用等不可序列化内容，会导致JSON.stringify失败，非必要不建议使用。

2. 如何查询默认序列化的属性清单 #

FabricJS没有「默认忽略的属性清单」，它采用白名单规则，仅会输出对应类stateProperties数组中存在的属性，你可以直接打印对应类的原型属性查看白名单：

• 所有Fabric对象通用的基础属性：打印fabric.Object.prototype.stateProperties查看
• 不同类型对象的专属属性：比如矩形的专属属性存放在fabric.Rect.prototype.stateProperties，文本的专属属性存放在fabric.Text.prototype.stateProperties，以此类推
  你提到的borderColor属于对象的交互控制属性，没有纳入默认白名单，因此默认不会被序列化。

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