Check out my
new book!
HTML5 Games book
Pixastic - Now a JavaScript image processing library Pixastic JavaScript Image Editor 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
Update - now also:
  • Color Adjust
  • Mosaic
  • Pointillize
  • Solarize
The effects can be applied either via JavaScript or by specifying CSS class names on the image elements in the DOM. With JavaScript, it boils down to doing something like:
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.

Live demo of HSL action 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.

⇓ 36 comments Unknown

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:

December 3, 2008 at 8:07 AM
Jacob Seidelin

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..

December 3, 2008 at 8:36 AM
Unknown

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.

December 3, 2008 at 12:41 PM
Jacob Seidelin

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.

December 3, 2008 at 12:57 PM
Unknown

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.

December 3, 2008 at 2:03 PM
Jacob Seidelin

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.

December 4, 2008 at 3:19 AM
Unknown

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.

December 4, 2008 at 5:03 AM
Anonymous

Chrome is not supported. Doesn't it meet the requirements?

December 4, 2008 at 4:42 PM
Unknown

Well, it's still very new, so I wouldn't be surprised if not all browsers are perfectly supported yet.

December 5, 2008 at 12:36 AM
Jacob Seidelin

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.

December 8, 2008 at 2:28 AM
Anonymous

Great work!
This use of canvas shows the real power of HTML 5 and JavaScript.

Congratulations

December 18, 2008 at 6:24 PM
Anonymous

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/

December 30, 2008 at 8:35 PM
stepheneb

Is the code for Pixastic available in a public repository (svn, git, etc.)?

January 9, 2009 at 5:14 PM
Jacob Seidelin

Not at the moment but I am considering it.

January 10, 2009 at 2:14 AM
Anonymous

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-

February 1, 2009 at 9:37 AM
Jacob Seidelin

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.

February 2, 2009 at 12:44 PM
Shaggy This comment has been removed by the author. January 6, 2010 at 9:20 AM Shaggy

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!

January 6, 2010 at 9:22 AM
Shaggy

for the record. it works fine in chrome now.

January 6, 2010 at 9:24 AM
Indi

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!!

January 23, 2010 at 6:45 PM
Manohar

Hi Jacob,

Can you tell me how to store the modified image, which is generated by applying some effects using your features into a new image or to update the original image source?

Thanks
- Manohar

May 27, 2010 at 6:45 AM
Unknown

Hello! Love the library. Would be awesome if I could also pass in a canvas instead of image for processing.

January 27, 2011 at 3:49 AM
Pushpinder Bagga

Thanks for this.

Albeit, could you please tell me how to revert the image in jquery?

I am using the below code to revert it

$(".photo").pixastic("desaturate");

$(".photo").hover(function () {
$(this).pixastic(revert);
},
function () {
$(this).pixastic("desaturate");
});


Is it correct?

February 21, 2011 at 5:16 PM
meerblickzimmer

@Pushpinder Did you find a solution for your code? It doesn´t work for me. Thanks for help!

April 4, 2011 at 3:09 AM
kleinergruenerdrache

Hey Jacob,

i think your pixastic library is something i've been looking for for a while now.

is it possible to use the blend effect to assign a blend mode for an image (white shape with transparent background) on top of a background image? i am trying to create an inline shape png that is scrollable an in the meantime affects the static background image.
i would be happy if there was a solution for that.

thanks in advance,
jonas

September 7, 2011 at 1:26 PM
skolnabber

Jacob,

Thanks for creating and making available the Pixastic library.

Is there a way to enable the filtering to be applied to images that are hosted on a different domain? For example, I'm trying to apply the blend filter as follows where the 'home_hero_image' is hosted on a different domain:

var blendImg = new Image();
blendImg.src = "images/red_square_330x330.jpg";

blendImg.onload = function() {
Pixastic.process(document.getElementById("home_hero_image"), "blend",
{
amount : 1,
mode : "multiply",
image : blendImg
}
);

Thanks,
Jonathan

January 4, 2012 at 11:59 AM
tatva177

When I save image, it seems to be corrupted. Shows 0 byte size.

February 9, 2012 at 12:03 AM
vijayrajesh

Hi,

I created one demo with this library. The demo works as follows. The default image is blurred. Then when on hover, it shows clear image. The morph is smooth and uses fadeIn of jQuery.

April 3, 2012 at 10:12 AM
vijayrajesh

http://jqrecipes.com/blur-effect-on-image-with-hover-event/ here is the url.

April 3, 2012 at 8:56 PM
vijayrajesh

Blur effect on hover

Kindly remove my previous post.

April 3, 2012 at 8:57 PM
Unknown

Thanks for this image filters that makes possible to make photoshop like online apps. I have made one using these filters. Now I am trying to make another app that use blending modes too.
You can check this out here : http://ep4f.com
which is built using fabricjs, pixastic and jsmanipulate for distorting images and other advanced filters.

January 29, 2013 at 9:21 AM
Unknown

First of all Thanks for giving us such library. But I have some problems in using these.
I am using adjust color but it's not working fine . Similarly for brightness , contrast not working fine.

I am changing values through the html5 element input type="range" dynamically

Please follow this link

http://stackoverflow.com/questions/16538706/pixastic-process-function-is-not-working-repeatedly

May 14, 2013 at 3:17 AM
Unknown

And the main point is how to retrieve image back to it's style as it was at the time of open. If I increase it's brightness amount via range slider then it's finely increasing it's brightness but now when I change slider to it's original position then it does not change image to it's original position.

Please Help Author!!!

May 14, 2013 at 3:20 AM
Unknown

Just great work - im looking forward to your implimenting masking is their a roadmap??

December 10, 2013 at 5:02 AM
Unknown

Hey having problem with samsung default browser(mobile) . It works fine in other browsers. The image that is transformed is disfigured. This is the code
window.onload = function(){
Pixastic.process(document.getElementById("demoimage"), "blend", {
amount : 0.8,
mode : 'multiply',
image : $("#blendimage").get(0)
});
}

It will be a great help if you can solve this issue.

January 2, 2014 at 9:20 PM
JonTheNerd

Very cool... amazing.. Any suggestions how I can show the Edges in red on the original images? Looking for some sample code
thx

May 8, 2014 at 4:43 PM
Post a Comment