Geek Answers Handbook

Using glfx.js filters in Fabric.js

I am creating a simple canvas application using Fabric.js. While everything looks good, I'm interested in some filter effects to make it a little cooler. After some searching, I came across various sources. But I'm especially interested in the glfx.js. library

I could not find any specific way to integrate Fabric.js with glfx.js. Glfx.js seems to have its own canvas classes fx.Canvas, so I'm a little worried that it's impossible to integrate the two.

My question is, can other libraries like glfx.js be used with Fabric.js? Because I can’t find out how to do this.

If not, if I use Fabric.js, will I need to write my own filters to get these effects?

http://evanw.imtqy.com/glfx.js/docs/

+4
source share
2 answers

Fabric is fairly easy to create new filters.

If you look at the Sepia filter source source , you can see what applyTois responsible for the actual processing of pixels per pixel. When invoked applyTo, a canvas element representing the image to which the filter is applied is passed to it. You change the image by changing this corresponding canvas element ( getImageData→ pixel processing → putImageData).

But what about glfx.js?

, fx.canvas() WebGL. , , , , . , :

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

, Fabric.

+4

http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl , glfx.js, !

- , activeObject.getSrc();, temp, !

+2

More articles:


All Articles