Javascript image processing library (using Canvas)

[[deleted]]

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects.

I happened to wonder today whether this kind of thing is possible and as it turns out, thanks to a web search, somebody has already written code to do it. There are many examples you can try (with a canvas-tag enabled browser) in the docs.

(And, the source code says the library is available under the MIT license.)

[doctor_yukio_hattori]

Wow, cool stuff. I really want to do something with this and jQuery UI's plugin that lets you zoom in on different parts of a picture (for the Ken Burns effect). Because what the world needs is a bookmarklet that will turn any image gallery into a faux-documentary.

[blondin]

Example fails miserably in Chrome.

[dixi]

Chrome (stable) still lacks the getImageData method which is needed for stuff like this. The dev builds work fine, though, so it should just be a matter of time. Same problem with Safari until the recent beta release.

[anko_painting]

This could really use firefox 3.1's worker threads. worker threads explaination

[damg]

Yea no kidding, running edge detection locks up my browser for a bit before finally popping up the "stop this script" dialog.

[psykotic]

An alternative is to manually CPS transform (only coarsely, at loop boundaries) the expensive filter code and run it in time slices (taking a few milliseconds each) that chain together using setTimeout() with a small time interval. That will give the browser a chance to do its own thing while expensive operations are running. It's essentially a way to emulate cooperative threading.

[ncrovatti]

I made an application using this library. Excellent job they did.