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

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

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

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?

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

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

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

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

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.

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

Blur effect on hover

Kindly remove my previous post.