角度的FabricJS自定义过滤器答案

【问题标题】：FabricJS custom filter in angular角度的FabricJS自定义过滤器
【发布时间】：2020-07-27 01:44:59
【问题描述】：

我有二值/灰度图像，我想过滤该图像，使所有白色变为透明，所有深色变为某些用户特定的颜色。

我在创建 Angular 自定义过滤器时遇到问题。我发现的所有示例都是针对纯 JavaScript 的，演示页面不起作用http://fabricjs.com/image-filters。

根据我掌握的信息，我尝试了什么：

private canvas: fabric.Canvas;

constructor() { this.initializeNewFilter()  }

initializeNewFilter() {
  fabric.Image.filters['Redify'] = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

  type: 'Redify',

  applyTo: function (canvasEl) {
    const context = canvasEl.getContext('2d');
    const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
    const data = imageData.data;

    for (let i = 0, len = data.length; i < len; i += 4) {
      data[i + 1] = 0;
      data[i + 2] = 0;
    }
    context.putImageData(imageData, 0, 0);
  }
});

fabric.Image.filters['Redify'].fromObject = function (object) {
  return new fabric.Image.filters['Redify'](object);
};

}

即使在这个基本示例中，我也会遇到错误：

 ERROR TypeError: canvasEl.getContext is not a function

const context = canvasEl.getContext('2d') // getContext('2d') 不存在，但是 canvasEl 在这里

我也不知道如何通过自定义过滤器发送，有没有更好的解释？

【问题讨论】：

我遇到了同样的问题 - 通过 Chrome devtools 在我看来，正在发送的 webGL 上下文没有必要的 fns - 他们似乎没有添加任何过滤器迁移指南或文档的任何内容，我也无法在 github 问题中找到任何帮助。似乎这应该很容易，但不是当前的例子......
@Stacey Reiman 我在 FabricJS 库之外解决了这个问题。我在自己的画布中加载图像，使用像素进行操作（执行我的自定义过滤器），然后将已经准备好的图像发送到 FabricJS。我检查了 FabricJS 的代码，他们使用自定义过滤器执行了类似的过程。

标签： javascript angular fabricjs

【解决方案1】：

取决于您使用的过滤引擎，getContext 可用于 fabric.Canvas2dFilterBackend()。

试试

fabric.initFilterBackend = function() {      
    return (new fabric.Canvas2dFilterBackend());    
};

参考： FabricJS filtering overview

【讨论】：