如何在fabric.js中运行WebGl图像过滤器

Question

我正在尝试执行以下代码片段[http://fabricjs.com/fabric-intro-part-2#image_filters]

  fabric.Image.filters.Redify = fabric.util.createClass({

  type: 'Redify',

  /**
   * Fragment source for the redify program
   */
  fragmentSource: 'precision highp float;\n' +
    'uniform sampler2D uTexture;\n' +
    'varying vec2 vTexCoord;\n' +
    'void main() {\n' +
      'vec4 color = texture2D(uTexture, vTexCoord);\n' +
      'color.g = 0;\n' +
      'color.b = 0;\n' +
      'gl_FragColor = color;\n' +
    '}',

  applyTo2d: function(options) {
    var imageData = options.imageData,
        data = imageData.data, i, len = data.length;

    for (i = 0; i < len; i += 4) {
      data[i + 1] = 0;
      data[i + 2] = 0;
    }

  }
});

fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject;

但我得到了

Error:
filter.applyTo is not a function

我尝试将fabric后端更改为const webglBackend = fabric.WebglFilterBackend() fabric.filterBackend = webglBackend

但它仍然返回该错误，是否有我在某处遗漏的配置选项？将applyTo2d函数更改为applyTo可以消除错误，但"options“不会有options.imageData。

Answer 1

您应该通过扩展BaseFilter类来创建过滤器，如下所示

fabric.Image.filters.MyFilter = fabric.util.createClass(fabric.Image.filters.BaseFilter, { 
   ... 
})

也可以在这里查看https://github.com/fabricjs/fabric.js/blob/master/src/filters/filter_boilerplate.js