Show HN: JavaScript Instagram-like Filters

https://github.com/alexmic/filtrr

by alexmic • 14 years ago

127 27 14 years ago

github.com

DanBlake• 14 years ago

would be cool to see a demo.

Kiro• 14 years ago

http://alexmic.github.com/filtrr/

franze3• 14 years ago

really great work there.

not a big fan of the license choice, though.

cleverjake• 14 years ago

Not to derail the thread, but whys that?

Keverw• 14 years ago

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.

hhastings• 14 years ago

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.

leak• 14 years ago

This is awesome. Thanks!

rokhayakebe• 14 years ago

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.

whymsicalburito• 14 years ago

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

alexmic5• 14 years ago

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

alexmic5• 14 years ago

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

maxjaderberg• 14 years ago

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

jamesflorentino• 14 years ago

Try this one: https://gist.github.com/1747707

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

franze3• 14 years ago

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-... and an example here http://updates.html5rocks.com/2011/08/Saving-generated-files...

kwamenum863• 14 years ago

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• 14 years ago

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• 14 years ago

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.

alexmic5• 14 years ago

Yeah, I am aware of that. This was literally a weekend thing, so I'll try and improve it when I have some time. Thanks for the feedback!

kwamenum863• 14 years ago

Cool! It really is an awesome project otherwise. I'll definitely play around with this as some point.

iso8859-1• 14 years ago

Why not use WebWorkers?

kwamenum863• 14 years ago

Web workers are not well-supported yet: http://caniuse.com/#feat=webworkers

The most important omissions from that list are IE < 10. Using web workers if present and falling back on a different strategy are probably the right way to go because web workers will finish more quickly.

pie• 14 years ago

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

huytoan_pc• 14 years ago

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

Show HN: JavaScript Instagram-like Filters

Related Stories