
Show HN: JavaScript Instagram-like Filters - alexmic
https://github.com/alexmic/filtrr
======
kwamenum86
You should rewrite a "pseudo-non-blocking" implementation of these filters.
Right now they block the UI thread for too long, which limits how useful these
can be. Web workers in one option, although it's not widely supported. The
better option is to use setTimout or setInterval to break of the processing
work into chunks, which is supported in all browsers. For example, run the
loop n iterations then run the next n after a 15 ms delay. The way you've
implemented the processing right now makes this lib unsuitable for use on the
clientside.

~~~
newhouseb
Additionally, if you were doing this a couple years from now you could do it
all in a shader in WebGL - which mimics what I believe to be Instagram's
technology progression from pure CPU filters to pure GPU filters.

~~~
paulirish
I just added fltrr to <https://github.com/bebraw/jswiki/wiki/Image-
manipulation> which tracks libraries that do this.

glfx.js does exactly what you suggest, leveraging WebGL shaders to do high
performance image manip. It's likely fltrr could use glfx.js under the hood
for very low-latency manip.

------
hhastings
What a fantastic contribution & thanks for considering MIT/MPL. This will
definitely come in handy as a small side side feature for user profiles on my
upcoming projects.

------
pie
Another recent Lomo-esque JS library: <http://vintagejs.com/>

------
huytoan_pc
It's definitely a good start, but IMO the quality of the filters are not on
par with those of Instagram.

A better JS filter library I found is CarmanJS. Check out their demos at
<http://camanjs.com/examples/presets>

------
rokhayakebe
Awesome. I would suggest wrapping this into a small service and sell it as an
API. No need for complicated documentation either, one URL with parameters.

------
franze
really great work there.

not a big fan of the license choice, though.

~~~
cleverjake
Not to derail the thread, but whys that?

~~~
Keverw
I don't really like the GPL also. Make's it basically useless in a closed
application but this isn't the place to rant.

~~~
alexmic
I don't really have a reason for picking GPL. Would you prefer MIT instead?

~~~
franze
yeah, strongly preferred.

here are two very handy articles about the differences between open source
(and other) licenses

[http://www.smashingmagazine.com/2010/03/24/a-short-guide-
to-...](http://www.smashingmagazine.com/2010/03/24/a-short-guide-to-open-
source-and-similar-licenses/)

[http://en.wikipedia.org/wiki/Comparison_of_free_and_open_sou...](http://en.wikipedia.org/wiki/Comparison_of_free_and_open_source_software_licenses)

~~~
alexmic
Thanks for this - will change the licence to MIT.

------
whymsicalburito
Awesome work! Is there a way that these filtered images could then be saved
server side to be used later without the js?

~~~
alexmic
You could get the image data from the canvas element using getImageData() and
upload it to your server.

~~~
alexmic
Oops, the correct method is toDataURL(). See comment above.

------
maxjaderberg
this is very good! is it possible to save the filtered images locally?

~~~
jamesflorentino
Try this one: <https://gist.github.com/1747707>

It basically uses the toDataURL() method to get the image data of the canvas.

~~~
franze
well, this method downloads a file without a .png at the end (and most users
are overwhelmed with the task of renaming a file)

think there is something coming with BlobBuilder and FileSaver, but i haven't
hat time yet to give it a spin [http://dev.w3.org/2009/dap/file-system/file-
writer.html#idl-...](http://dev.w3.org/2009/dap/file-system/file-
writer.html#idl-def-FileSaver) and an example here
[http://updates.html5rocks.com/2011/08/Saving-generated-
files...](http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-
client-side)

------
leak
This is awesome. Thanks!

------
DanBlake
would be cool to see a demo.

~~~
Kiro
<http://alexmic.github.com/filtrr/>

