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

【问题标题】：Using glfx.js filters in Fabric.js在 Fabric.js 中使用 glfx.js 过滤器
【发布时间】：2013-11-29 07:04:56
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： fabricjs

【解决方案1】：

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

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

但是 glfx.js 呢？

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

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

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

【讨论】：

要么向 glfx.js 提交问题以支持接受现有的画布元素，要么在 Fabric 中创建自定义过滤器（顺便说一句，那里已经有大量可用的过滤器）。
但是它们非常慢，当我将卷积内核应用于 255KB 的图像时，它也非常慢。如何编写我们自己的自定义过滤器以集成到Fabicjs？

【解决方案2】：

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

由于图像尺寸小，我使用它有点愚蠢，我得到对象activeObject.getSrc(); 然后我将它添加到临时画布应用过滤器并再次将其添加到画布中！

【讨论】：