调用 canvas 函数 `loadFromJson` 时不应用混合过滤器

Question

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

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

我使用的是结构版本 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));

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

我创建了一个 fiddle 来代表这个问题： http://jsfiddle.net/Mark_1998/1pc95xef/3/

Answer 1

这似乎是 Blend.toObject() 没有保存其 class 类型导致的错误，因此 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 属性，因此从它 returns.[=18= 的对象扩展 Blend.prototype.toObject() 是有意义的]

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

调用 canvas 函数 `loadFromJson` 时不应用混合过滤器

Blend Filter Not apply when call canvas function `loadFromJson`

filter

fabricjs

blending