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

Question

I'm trying to execute the following snippet of code [ 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;

But I get

Error:
filter.applyTo is not a function

I've tried changing the fabric backend to const webglBackend = new fabric.WebglFilterBackend() fabric.filterBackend = webglBackend

but it still returns that error, is there an configuration option that I have missed somewhere? Changing the applyTo2d function to applyTo gets rid of the error but "options" won't have options.imageData.

Answer 1

You should create the filter by extending the BaseFilter class, like this

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

Also have a look here https://github.com/fabricjs/fabric.js/blob/master/src/filters/filter_boilerplate.js