Check out my
new book!
HTML5 Games book
A few Pixastic updates A few minor updates to Pixastic before I begin working on the next edition of the photo editor (the one that will eventually also work as a Ubiquity command). Undo/revert functionality, a color histogram action, and more..

A few people have requested a way to revert the image back to the original, so Pixastic now remembers the original image and lets you call Pixastic.revert(img) to undo all the processing done on an image. It's important to know that the resulting image from a process() call is not the same element as the one passed to the process() call. Pixastic creates a new canvas element which means that most properties, attributes and events are not carried over to the new canvas element. For instance, if you are making a mouseover/out effect on an image, you'll have to listen for the mouseout event on the new element after calling process() in the mouseover event. The example on the introduction page has been reworked to use this.

After processing an image, the options object now holds the resulting canvas in a property called resultCanvas. Example:
  var options = {};
  Pixastic.process(image, "action", options);
  options.resultCanvas; // <- holds new canvas
The canvas is also returned by the Pixastic.process() method itself, but only if the image is completely loaded by the time of the call (if it is not, the actual processing is deferred until the onload event on the image)

The options object can now also take a boolean leaveDOM option that will leave the DOM untouched after processing. If not set (or set to false), Pixastic behaves as it did before and replaces the original image with the new canvas element. The new revert() method will also put the original image element back in the DOM, if possible.

Bill Mill did some color histogram code for his article series on canvas image processing. This code has now been integrated (and slightly modified for consistency with the brightness histogram). Thanks Bill!

Lastly, I made few performance improvements in some of the actions (brightness/contrast, color adjust, desaturate). More will come as I get around to it.
⇓ 8 comments Anonymous

This is utterly great work!

However, is there anyway this can be used from within the chrome context in firefox? ie. document.write isn't available AFAIK, so the new canvas element can't be created.

Thanks

April 12, 2009 at 5:17 PM
Anonymous

How do you use the reset method with jQuery?

June 10, 2009 at 6:38 AM
Anonymous

image processing
thinning function
can you add to image processiong the thinning function ?
for a letters let say.
is it possible to do ?
rgrds
EL

January 22, 2010 at 10:08 AM
Anonymous

I'm also very interested as to how the revert syntax works with jquery

July 2, 2010 at 12:04 AM
Anonymous

Hi, i need this to work with jquery! Thanks

August 3, 2010 at 3:02 PM
Anonymous

Just another to ask for jQuery compatibility for revert.

May 18, 2011 at 12:14 PM
D.Kreft

You can get jQuery support for revert thusly. Sorry for the lack of formatting...

Pixastic.Actions.revert = {
process : function(params) {
Pixastic.revert(params.image);
},
checkSupport : function() {
return (Pixastic.Client.hasCanvasImageData() || Pixastic.Client.isIE());
}
};

June 28, 2011 at 11:33 AM
Sumendra

This site use pixastic library in which it gets photos from facebook, flickr or from any other source cross-domain and apply effects and then save them back to facebook or desktop.
Look here : Onlinephotomashup.com

September 12, 2011 at 1:23 AM
Post a Comment