FabricJS：使用loadFromJSON后保留对象图像滤镜的正确索引

这个问题我之前也碰到过！FabricJS在序列化JSON的时候会自动过滤掉数组里的假值（比如false、null），所以你初始化的[false,false,false,false]保存后就只剩启用的滤镜，加载回来自然丢失了占位的false，导致索引结构乱掉。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用滤镜类型/自定义标识替代数组索引（最推荐） #

其实依赖数组索引来区分滤镜本身就不太稳健——万一后续调整滤镜顺序，整个逻辑都要改。更靠谱的方式是直接用滤镜的type属性，或者给每个滤镜加个自定义的filterId，然后通过这个标识来做逻辑判断，而不是数组位置。

比如你应用滤镜时：

// 给灰度滤镜加自定义ID（或者直接用它的type：'Grayscale'）
const grayFilter = new fabric.Image.filters.Grayscale();
grayFilter.filterId = 0;
oImg.filters[0] = grayFilter;

// 应用去色滤镜
const removeColorFilter = new fabric.Image.filters.RemoveColor();
removeColorFilter.filterId = 2;
oImg.filters[2] = removeColorFilter;

oImg.applyFilters();
canvas.renderAll();

加载JSON之后，重新把滤镜映射回索引数组（或者直接用filterId做逻辑）：

canvas.loadFromJSON(yourJsonData, function() {
  canvas.renderAll();
  
  // 遍历所有图像对象，修复滤镜索引
  canvas.getObjects().forEach(obj => {
    if (obj.type === 'image' && obj.filters) {
      // 初始化4个位置的占位数组
      const indexedFilters = [false, false, false, false];
      
      obj.filters.forEach(filter => {
        // 根据自定义的filterId放回对应位置
        if (filter.filterId !== undefined) {
          indexedFilters[filter.filterId] = filter;
        }
        // 或者直接用Fabric自带的type映射：
        // const typeMap = {
        //   Grayscale: 0,
        //   Invert: 1,
        //   RemoveColor: 2,
        //   BlendColor: 3
        // };
        // const index = typeMap[filter.type];
        // if (index !== undefined) indexedFilters[index] = filter;
      });
      
      // 替换回对象的filters数组，确保索引结构正确
      obj.filters = indexedFilters;
      // 重新应用滤镜（可选，加载后一般已经生效，但保险起见可以加）
      obj.applyFilters();
    }
  });
});

方案2：自定义Fabric的序列化/反序列化逻辑 #

如果你必须保留原始的索引数组结构，可以重写FabricJS中Image对象的toJSON和fromJSON方法，强制保留false占位符。不过这个方法侵入性较强，要注意Fabric版本的兼容性：

// 重写Image的toJSON，确保输出的filters是长度为4的数组，缺失的补false
fabric.Image.prototype.toJSON = function(propertiesToInclude) {
  const json = this.callSuper('toJSON', propertiesToInclude);
  const fixedFilters = [false, false, false, false];
  
  if (this.filters) {
    this.filters.forEach(filter => {
      // 这里需要滤镜带filterId来对应索引
      if (filter.filterId !== undefined) {
        fixedFilters[filter.filterId] = filter.toJSON();
      }
    });
  }
  
  json.filters = fixedFilters;
  return json;
};

// 重写fromJSON，把false占位符还原回去
fabric.Image.fromJSON = function(json, callback) {
  return this._fromJSON(json, callback, function(obj, jsonData) {
    if (jsonData.filters) {
      obj.filters = jsonData.filters.map(filterData => {
        if (filterData === false) {
          return false;
        } else {
          // 把JSON数据还原成对应的滤镜实例
          return fabric.Image.filters[filterData.type].fromJSON(filterData);
        }
      });
    }
  });
};

方案3：加载后直接重新构建索引数组 #

如果不想修改滤镜的创建逻辑，也可以在加载完成后，根据滤镜的type直接映射回你需要的索引结构：

// 建立滤镜类型到索引的映射表
const filterTypeMap = {
  Grayscale: 0,
  Invert: 1,
  RemoveColor: 2,
  BlendColor: 3
};

canvas.loadFromJSON(yourJsonData, () => {
  canvas.getObjects().forEach(obj => {
    if (obj.type === 'image') {
      const indexedFilters = [false, false, false, false];
      
      obj.filters.forEach(filter => {
        const index = filterTypeMap[filter.type];
        if (index !== undefined) {
          indexedFilters[index] = filter;
        }
      });
      
      obj.filters = indexedFilters;
      obj.applyFilters();
    }
  });
  
  canvas.renderAll();
});

总的来说，方案1是最稳妥的，因为它从根源上避免了依赖数组索引的脆弱性，后续维护也更方便。

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