Question

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

$_SERVER['REMOTE_ADDR']

但是我得到了

  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;

我已尝试将布料后端更改为 const webglBackend = new fabric.WebglFilterBackend（） fabric.filterBackend = webglBackend

但它仍然返回该错误，是否有我错过的配置选项？将applyTo2d函数更改为applyTo可以消除错误，但是＆＃34;选项＆＃34;没有选项.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

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

1 个答案: