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

我正在使用Fabric.js构建一个简单的画布应用程序。虽然事情看起来不错，但我对一些滤镜效果感兴趣，让它变得更酷。经过一些搜索后，我通过各种渠道发现。但我对glfx.js库特别感兴趣。在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/

2013-11-15 Ziyan Junaideen

这是相当容易的面料来营造新的过滤器。

例如，如果您看source of Sepia filter，则可以看到applyTo is responsible用于实际像素每像素处理。当调用applyTo时，它将传递一个画布元素，表示将滤镜应用到的图像。您可以通过修改相应的画布元素（getImageData - >像素处理 - >putImageData）来修改图像。

但是glfx.js呢？

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

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

但因为它现在代表我不明白的方式将它与纤维过滤器相集成。

来源

2013-11-16 11:16:15 kangax

你知道一个很好的选择吗？ – maja

要么glfx.js文件支持接受现有画布元素，要么在Fabric中创建自定义过滤器（已有大量可用过滤器，btw）。 – kangax

但是它们速度非常慢，并且当我将它应用于255KB的图像时，卷积内核也非常慢。如何编写我们自己的自定义过滤器来集成到Fabicjs？ – subhfyu546754

我用这个http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl其速度不如glfx.js平滑，但我做得很好！

因为小尺寸的图像，我使用它的一种愚蠢，我得到的对象activeObject.getSrc();然后我把它添加到临时画布应用过滤器，并再次在画布上添加它！

来源

2014-01-15 14:07:17

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

回答

相关问题