时间戳

首页 > 解决方案 > 角度的FabricJS自定义过滤器

javascript - 角度的FabricJS自定义过滤器

问题描述

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

我在 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 在这里

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

标签： javascriptangularfabricjs

解决方案

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

尝试

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

参考： FabricJS 过滤概述

推荐阅读