fabricjs - 在 Fabric.js 中使用 glfx.js 过滤器

Question

我正在使用 Fabric.js 构建一个简单的 Canvas 应用程序。虽然看起来不错，但我对一些过滤效果感兴趣，以使其更酷一些。经过一些搜索，我通过各种来源找到了。但我对 glfx.js 库特别感兴趣。

我找不到任何将 Fabric.js 与 glfx.js 集成的特定方法。 glfx.js 似乎有自己的 Canvas 类 fx.Canvas所以我有点担心两者不能融合。

我的问题是，是否可以将 glfx.js 等其他库与 Fabric.js 一起使用？因为我不知道怎么做。

如果没有，如果我使用 Fabric.js，我是否需要编写自己的过滤器来获得这些效果？

http://evanw.github.io/glfx.js/docs/

Answer 1

在 Fabric 中创建新过滤器相当容易。

如果你看 source of Sepia filter ，例如，您可以看到 applyTo is responsible用于实际的逐像素处理。当applyTo被调用时，它会传递一个 Canvas 元素，该元素表示要应用过滤器的图像。您可以通过修改此相应的 Canvas 元素来修改图像( getImageData -> 像素处理 -> putImageData )。

但是 glfx.js 呢？

我看到了 fx.canvas()返回一个新创建的 Canvas ，带有已经初始化的 WebGL 上下文。不幸的是，它似乎不支持接受已经存在的 Canvas 元素来操作。如果是这样，我们可以这样做:

...
applyTo: function(canvasEl) {
  var fxCanvas = fx.canvas(canvasEl);
  fxCanvas.ink(0.25).update();
}
...

但就目前而言，我没有看到将其与 Fabric 过滤器集成的方法。