Question

我正在使用Fabric.js构建一个简单的画布应用程序。虽然事情看起来不错，但我对一些滤镜效果感兴趣，以使它变得更酷。经过一些搜索后，我遇到了各种各样的消息。但我对glfx.js库特别感兴趣。

我找不到任何将Fabric.js与glfx.js集成的特定方法。 glfx.js似乎有自己的画布类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元素，表示要应用过滤器的图像。您可以通过修改此相应的画布元素（getImageData - ＆gt;像素处理 - ＆gt; putImageData）来修改图像。

但是glfx.js呢？

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

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

但是现在看来我没有办法将它与Fabric过滤器集成。

Answer 2

我快速使用http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl这个glfx.js并不像activeObject.getSrc();那么顺利但是我做得很好！

我使用它有点笨，因为小尺寸图像，我得到对象{{1}}然后我将它添加到临时画布应用过滤器并在画布中再次添加它！

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

2 个答案: