Question

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

然后再次从该JSON加载画布，当时我的过滤器未应用。

我正在使用结构版本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/

Answer 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+没有此问题，因此这是升级的另一个原因。

混合滤镜在调用画布函数`loadFromJson`时不适用

1 个答案: