调用画布函数`loadFromJson`时混合过滤器不适用

Posted 2023-03-25

【中文标题】调用画布函数`loadFromJson`时混合过滤器不适用

【英文标题】：Blend Filter Not apply when call canvas function `loadFromJson`

【发布时间】：2019-05-11 00:46:16

【问题描述】：

当我对图像执行blend 过滤并将画布转换为 JSON 时

然后我再次从那个 JSON 加载画布，当时我的过滤器没有应用。

我使用的是 Fabric 版本 1.7.22

我的过滤代码如下：

canvas.getActiveObject().filters.push(new fabric.Image.filters.BlendColor(
                    color: '#ff0000',
                    mode: 'add',
                    alpha: 0.8
                ))
canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas));

在将画布加载到 JSON 后，所有其他过滤器都可以正常工作，但只有混合过滤器不起作用。 我的过滤器中是否缺少任何属性？

我创建了一个代表问题的小提琴： http://jsfiddle.net/Mark_1998/1pc95xef/3/

【参考方案1】：

这似乎是由Blend.toObject() 未保存其类类型引起的错误，因此Blend 过滤器在序列化时最终没有type: 'Blend'。为了正确反序列化对象，Fabric 会解析它的type 属性，当它没有找到序列化过滤器的属性时，它就会放弃它。

您可以使用以下补丁来解决此问题：

fabric.Image.filters.Blend.prototype.toObject = function() 
  return fabric.util.object.extend(this.callSuper('toObject'), 
    color: this.color,
    image: this.image,
    mode: this.mode,
    alpha: this.alpha
  );

BaseFilter.prototype.toObject() 确实设置了type 属性，因此从它返回的对象扩展Blend.prototype.toObject() 是有意义的。

P.S：最新的 fabric.js 2.4+ 没有这个问题，所以这是升级的另一个理由。

【讨论】：

@mayurkukadiya 当然，这是你的补丁的一个分支：jsfiddle.net/kcn2Lv9e。只需确保在 序列化过滤器之前调用它。