Pixastic - Now a JavaScript image processing library
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
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.
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.
Ah, I was wondering when you were finishing this.
December 3, 2008 at 8:07 AM Jacob SeidelinLooks 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..
December 3, 2008 at 8:36 AM UnknownDX
December 3, 2008 at 12:41 PM Jacob SeidelinI 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. :-)
December 3, 2008 at 12:57 PM UnknownThanks 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.
December 3, 2008 at 2:03 PM Jacob SeidelinEgh.. 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 Unknownah, interesting. I shall try some other browsers with canvas support.
December 4, 2008 at 5:03 AM AnonymousStill, 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?
December 4, 2008 at 4:42 PM UnknownWell, 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 SeidelinLast 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 AnonymousGreat work!
December 18, 2008 at 6:24 PM AnonymousThis use of canvas shows the real power of HTML 5 and JavaScript.
Congratulations
Hey, here is a nice article on your work by Soumya
December 30, 2008 at 8:35 PM stephenebhttp://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.)?
January 9, 2009 at 5:14 PM Jacob SeidelinNot at the moment but I am considering it.
January 10, 2009 at 2:14 AM AnonymousJacob,
February 1, 2009 at 9:37 AM Jacob SeidelinWhat 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.
February 2, 2009 at 12:44 PM Shaggy This comment has been removed by the author. January 6, 2010 at 9:20 AM ShaggyThis is great.
January 6, 2010 at 9:22 AM ShaggyFor 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.
January 6, 2010 at 9:24 AM IndiHi, is it possible to apply a desaturate effect to ALL images in a php? I cannot change some of their classes to pixastic class.
January 23, 2010 at 6:45 PM ManoharAlso, 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!!
Hi Jacob,
May 27, 2010 at 6:45 AM UnknownCan 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
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 BaggaThanks for this.
February 21, 2011 at 5:16 PM meerblickzimmerAlbeit, 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?
@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 kleinergruenerdracheHey Jacob,
September 7, 2011 at 1:26 PM skolnabberi 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
Jacob,
January 4, 2012 at 11:59 AM tatva177Thanks 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
When I save image, it seems to be corrupted. Shows 0 byte size.
February 9, 2012 at 12:03 AM vijayrajeshHi,
April 3, 2012 at 10:12 AM vijayrajeshI 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.
http://jqrecipes.com/blur-effect-on-image-with-hover-event/ here is the url.
April 3, 2012 at 8:56 PM vijayrajeshBlur effect on hover
April 3, 2012 at 8:57 PM UnknownKindly remove my previous post.
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.
January 29, 2013 at 9:21 AM UnknownYou can check this out here : http://ep4f.com
which is built using fabricjs, pixastic and jsmanipulate for distorting images and other advanced filters.
First of all Thanks for giving us such library. But I have some problems in using these.
May 14, 2013 at 3:17 AM UnknownI 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
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.
May 14, 2013 at 3:20 AM UnknownPlease Help Author!!!
Just great work - im looking forward to your implimenting masking is their a roadmap??
December 10, 2013 at 5:02 AM UnknownHey having problem with samsung default browser(mobile) . It works fine in other browsers. The image that is transformed is disfigured. This is the code
January 2, 2014 at 9:20 PM JonTheNerdwindow.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.
Very cool... amazing.. Any suggestions how I can show the Edges in red on the original images? Looking for some sample code
May 8, 2014 at 4:43 PMthx