Subscribe
So, a while ago I played around with applying different effects to images by using the canvas element. The result was a small library that I posted about here. A bit later, I took some of that code and turned it into a small image editing application that I dubbed Pixastic,
the most web 2.0 name I could think of. Now I've ripped out the filtering parts and turned it back into an image processing library, also called Pixastic.
You should check out the Pixastic site if you want the whole low down on what it does, but here's a quick summary. The Pixastic library allows you to apply a variety of effects or "actions" on an image. For most of the effects, the magic is done by painting the image on a
canvas element and then accessing the raw pixel data via the getImageData and putImageData methods. Currently available actions are:
- Blur
- Brightness/Contrast
- Crop
- Desaturate
- Edge Detection
- Emboss
- Flip Horizontally/Vertically
- Glow
- Histogram
- Hue/Saturation/Lightness
- Invert
- Laplace Edge Detection
- Lighten
- Noise
- Posterize
- Remove Noise
- Sepia
- Sharpen
- Unsharp Mask
- Color Adjust
- Mosaic
- Pointillize
- Solarize
Pixastic.process(
document.getElementById("myImage"),
"blur",
{amount:0.5}
);
And with CSS classes the same would be done like this:
<img src="myimage.jpg" class="pixastic pixastic-blur(amount=0.5)" />In the
canvas-less IE, the effects are applied (when possible) with the proprietary IE filters. There's also some basic jQuery support that you can read more about on the Pixastic site.
This new library has its own site at http://www.pixastic.com/lib/ (the editor has been moved to http://editor.pixastic.com/).
There are live demos of all the actions in the documentation, as well as descriptions of parameters and all that.
Also, unlike the previous library, this code freely available under the terms of the MIT license.
Check it all out here
All feedback, bugreports, contributions, etc. are of course much appreciated.
20 comments:
Ah, I was wondering when you were finishing this.
Looks awesome, but, jQuery support?
Don't tell me you have gone over to THAT side? D:
Oh, I've not gone over to any side :) But someone had inquired about making a jQuery plugin out of it and I figured why not. I must admit to having used a bit of jQuery on pixastic.com itself too, though..
DX
I knew it, now you too are starting to show signs of infections for the JavaScript library craze ._.
I guess it's only a matter of time before everybody uses libraries that transforms JavaScript into a BASIC language.
On a more serious note, I couldn't get any effects to work on Pixastic. The drawing tools worked perfectly fine, but effects such as blur showed no signs of being applied after I applied them. Running Firefox 3 on Ubuntu.
Hehe. Well, the jQuery stuff is optional. The rest is all pure. :-)
Thanks for the feedback. I'm getting a feeling that something is just not right with canvas on FF3 + Ubuntu/Linux. I'll try it myself tomorrow and see if I can find the problem.
I believe it's the nvidia drivers I'm using. They are simply crap when it comes to the canvas rendering, and I have no idea why.
Egh.. Nvidia drivers always seem to have issues. As I recall, at least some canvas things worked better in Opera, so I don't know if it's maybe the nvidia+Firefox combo.
ah, interesting. I shall try some other browsers with canvas support.
Still, this is really bothersome. Basically, my Firefox doesn't have any real canvas support :(
Amazingly enough, this problem doesn't exist for Firefox 2, but it's getting a bit old.
Chrome is not supported. Doesn't it meet the requirements?
Well, it's still very new, so I wouldn't be surprised if not all browsers are perfectly supported yet.
Last time I checked, Chrome was still using an older WebKit version that didn't include support for the getImageData/putImageData methods. When they are available in Chrome, it should work fine with Pixastic.
Great work!
This use of canvas shows the real power of HTML 5 and JavaScript.
Congratulations
Hey, here is a nice article on your work by Soumya
http://blog.taragana.com/index.php/archive/pixastic-the-new-online-javascript-photo-editor-a-review/
Is the code for Pixastic available in a public repository (svn, git, etc.)?
Not at the moment but I am considering it.
Jacob,
What an awesome achievement!
Unless I missed it, the Photo editor doesn't allow you to type a label or caption onto an image, which would be a useful feature.
Have you thought of adding that functionality?
Thanks so much.
-rem-
No, there's no such functionality yet. I have considered something like that, though, I'll have to check how far along canvas text support is.
This is great.
For now I am sticking to the ie supported stuff - blur,desaturate,lighten - which is pretty good for such a lame browser.
I need help with something though. I'm trying to desaturate a group of logos and then resaturate them on mouse over (with jquery fadein) or something.
do I need to save the old image in a variable or something. Or clone the image then desaturate ?
any help would be appreciated..
Great library!
for the record. it works fine in chrome now.
Hi, is it possible to apply a desaturate effect to ALL images in a php? I cannot change some of their classes to pixastic class.
Also, when an image loads in a display:hidden div, it won't accept the effect, even if the image is loaded. is it possible to overcome that? thanks a lot!!
Post a Comment