FabricJS图像过滤器没有碎片来源

Question

我有一个与WebGL不兼容的筛选器。有没有一种方法可以跳过编写fragmentSource？我试着覆盖织物。Image.filters.BaseFilter applyTo在filter子类上只调用this.applyTo2d(options);，但我没有得到任何图像数据。

applyTo: function(options) {
if (options.webgl) {
if (options.passes > 1 && this.isNeutralState(options)) {
// avoid doing something that we do not need
return;
}
this._setupFrameBuffer(options);
this.applyToWebGL(options);
this._swapTextures(options);
}
else if (!this.isNeutralState()) {
this.applyTo2d(options);
}
},

Answer 1

I能够以非优化的方式在webgl_backend.class.js.中使用最少的代码来实现这一点

首先，webgl后端需要非webgl过滤器的回退：

this.fallback2dBackend = new fabric.Canvas2dFilterBackend();

然后，不运行所有过滤器：fabric.filterBackend.applyFilters(filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey);

这样做：

var newSource = fabric.util.createCanvasElement();
newSource.width = sourceWidth;
newSource.height = sourceHeight;
var newSourceCtx = newSource.getContext('2d');
newSourceCtx.drawImage(this._originalElement, 0, 0, sourceWidth, sourceHeight);
filters.forEach(function(filter) {
if (!filter) {
return;
}
var backend = fabric.filterBackend;
if (filter.fragmentSource === null) {
backend = backend.fallback2dBackend;
}
backend.applyFilters(
[filter], newSource, sourceWidth, sourceHeight, this._element);
newSourceCtx.clearRect(0, 0, sourceWidth, sourceHeight);
newSourceCtx.drawImage(this._element, 0, 0, sourceWidth, sourceHeight);
}, this);

我已经发布了一个fork，以防有人想将其重构为PR