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
After processing an image, the options object now holds the resulting canvas in a property called
The options object can now also take a boolean
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.
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 canvasThe 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.
This is utterly great work!
April 12, 2009 at 5:17 PM AnonymousHowever, 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
How do you use the reset method with jQuery?
June 10, 2009 at 6:38 AM Anonymousimage processing
January 22, 2010 at 10:08 AM Anonymousthinning function
can you add to image processiong the thinning function ?
for a letters let say.
is it possible to do ?
rgrds
EL
I'm also very interested as to how the revert syntax works with jquery
July 2, 2010 at 12:04 AM AnonymousHi, i need this to work with jquery! Thanks
August 3, 2010 at 3:02 PM AnonymousJust another to ask for jQuery compatibility for revert.
May 18, 2011 at 12:14 PM D.KreftYou can get jQuery support for revert thusly. Sorry for the lack of formatting...
June 28, 2011 at 11:33 AM SumendraPixastic.Actions.revert = {
process : function(params) {
Pixastic.revert(params.image);
},
checkSupport : function() {
return (Pixastic.Client.hasCanvasImageData() || Pixastic.Client.isIE());
}
};
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.
September 12, 2011 at 1:23 AMLook here : Onlinephotomashup.com