Question

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

我在创建角度自定义滤镜时遇到问题。我发现的所有示例都是针对纯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在这里

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

Answer 1

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

试试

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

参考： FabricJS filtering overview

角度的FabricJS自定义过滤器

1 个答案: