search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.2k stars 3.52k forks source link

integration with glfx.js #1657

Closed inssein closed 10 years ago

inssein commented 10 years ago

I am creating an editor which requires real time updates to filters via sliders and I was thinking about the best way to do that. The Fabric.js filter's are good, but not fast enough to work with sliders.

I have read https://stackoverflow.com/questions/20008684/using-glfx-js-filters-in-fabric-js, and @kangax suggests modifying glfx.js to start accepting a pre-existing canvas element, but I don't think that can work because a canvas cannot have both a webgl and a 2d context.

The only solution I can see is creating a secondary canvas per image, reading the pixels (gl.readPixels) into an image data object, and then using ctx.putImageData.

That said, I haven't had a lot of luck getting it to work. Has anybody got it working?

inssein commented 10 years ago

Nevermind I figured it out.

For anybody that is interested, here is what i do: 1) Initialize a glfx.js canvas per photo object 2) Initialize a glfx.js texture when image is loaded 3) In my _render() function, instead of drawing the _element, i draw the glfx canvas.

Condor2708 commented 9 years ago

+1

inssein commented 9 years ago

@Condor2708 take a look at http://jsfx.inssein.com/ - that is what I am using now to have support for these effects in node as well.

Condor2708 commented 9 years ago

Do you have jsfx library integrated with Fabric? Or you have replaced Fabric with this one Thanks inssein

inssein commented 9 years ago

@Condor2708 I use the jsfx library (written by me, needs improvements but is good enough for my uses right now). I extend the image shape and add effects to it.