角度的FabricJS自定义过滤器

Posted 2023-03-25

【中文标题】角度的FabricJS自定义过滤器

【英文标题】：FabricJS custom filter in angular

【发布时间】：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 的代码，他们使用自定义过滤器执行了类似的过程。

【参考方案1】：

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

试试

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

参考： FabricJS filtering overview