[英]How do I run a WebGl Image filter in fabric.js
我正在尝试执行以下代码段[ 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
我尝试将结构后端更改为const webglBackend = new fabric.WebglFilterBackend()fabric.filterBackend = webglBackend
但它仍然会返回该错误,我是否错过了某个配置选项? 将applyTo2d函数更改为applyTo可以消除错误,但“ options”将没有options.imageData。
您应该通过扩展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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.