Photo editing with Ubiquity
This is the first release of the new image editor that has actual Ubiquity functionality. Yay. In my previous post I introduced a new JavaScript image editor based on my Pixastic image processing library and let you play around with a "static" demo version. Now I've made a few Ubiquity commands that lets you take the editor with you around the web and edit any image you want.
When the commands are executed a whole bunch of JavaScript is injected into the page which then takes care of setting up the editor, loading CSS, images, etc (about 100KB gzip'ed, everything included). All these assets are currently fetched from www.pixastic.com, maybe they'll eventually be bundled with Ubiquity.
Once you've got Firefox 3.5 and the Ubiquity extension up and running you can subscribe to the commands at http://www.pixastic.com/ubiquity/. This will add the commands![]()
elements are supported, I don't know if support for background images will be added at some point. I'd also like some more UI feedback when in this "image selection" mode, and possibly allow for selecting an image with the mouse prior to command execution.
Since the screenshots are always bigger than the image viewport in the editor, I've implemented some zoom functionality. There are just a few different pre-defined zoom levels and it doesn't allow for much zooming in, it's not very pretty anyway due to the interpolation when rescaling images in the browser. You'll see the current zoom level in the top left corner, some buttons or something for zooming in/out will be added later but for now you can use the mousewheel.
So you'll notice in the "Done" tab that there's now also an "Upload to Flickr" option where, with just a few clicks, you can authorize the editor with Flickr and then upload your edited image. It shouldn't be too hard to figure out. An authentication window is opened where you'll have to grant Pixastic the necessary privileges, you then confirm the authentication back in the editor and if all is ok, you can then fill in a few image details and begin the upload. It's all a bit rough around the edges and it needs a bit more work, better feedback to the user, more image info fields, etc.
A feature I might try to implement is to register if the original image was loaded from a Flickr photo page and then ask if the user wants to update the existing image or just upload to a new one. That shouldn't be too hard, I think. And of course more destinations, maybe Facebook and also something like ImageShack for quick and simple image hosting.
Most actions now let you apply them to a selected region of the image. Just drag a rectangular area on the image to make a selection. The selection stays active across actions until you click "Apply" on one of them, at which point the selection is reset.
To reduce the risk of forgetting to click "Apply" after setting the parameters for an editing action, the "Apply" button is now highlighted when any of the parameters are changed. If there are no parameters, eg. the invert action, the button will always be highlighted just as it will be for those actions where there are no "non-image-changing" default parameters (for instance the "mosaic" action, no value for the block size will leave the image untouched).
If you still manage to move on to something else without committing your changes, you can simply go back to the action you came from and the settings should be intact and ready for you to apply. I hope that's a reasonable compromise but I'm open to suggestions on how to improve the process.
Be sure to let me know what you think. And since the web is such a hostile environment there might some pages where things get messed up, just give me links so I can check it out.
So, have fun, I know I will. That special Roskilde Festival type of fun! Back in a weeks time.
Before we start
You should only use this with Firefox 3.5, anything older will probably not work at all (at least it didn't last time I checked). I haven't looked too deeply into it but I'm not sure it's possible to make it work for earlier versions due to some changes in security concerning the canvas image data acccess. That said, even with 3.5 this is still in the alpha stage and things occasionally fail.When the commands are executed a whole bunch of JavaScript is injected into the page which then takes care of setting up the editor, loading CSS, images, etc (about 100KB gzip'ed, everything included). All these assets are currently fetched from www.pixastic.com, maybe they'll eventually be bundled with Ubiquity.
Once you've got Firefox 3.5 and the Ubiquity extension up and running you can subscribe to the commands at http://www.pixastic.com/ubiquity/. This will add the commands
edit-image and edit-screenshot to your Ubiquity arsenal. The latest beta of Ubiquity supports hyphen-less commands but doing "edit image" seems to get mixed up with a Flickr search.
Image editing
Theedit-image command lets you edit any image on any web page using the Pixastic editor. Just execute the command and click on the relevant image to load the editor. Currently only Screenshots and zooming
The other command,edit-screenshot, does pretty much what it says. It takes a picture of the current page (only the visible portion and no browser UI) and then loads the editor using that image.
Since the screenshots are always bigger than the image viewport in the editor, I've implemented some zoom functionality. There are just a few different pre-defined zoom levels and it doesn't allow for much zooming in, it's not very pretty anyway due to the interpolation when rescaling images in the browser. You'll see the current zoom level in the top left corner, some buttons or something for zooming in/out will be added later but for now you can use the mousewheel.
Image upload and Flickr
Ubiquity allows the editor to do stuff it wouldn't normally have access to (eg. taking a picture of the current page, editing images regardless of where they're hosted, etc) which means it is also possible to post the image to any destination such as photo hosting services and what not. An obvious one to implement was Flickr since it's widely used and has a nice and detailed API.
So you'll notice in the "Done" tab that there's now also an "Upload to Flickr" option where, with just a few clicks, you can authorize the editor with Flickr and then upload your edited image. It shouldn't be too hard to figure out. An authentication window is opened where you'll have to grant Pixastic the necessary privileges, you then confirm the authentication back in the editor and if all is ok, you can then fill in a few image details and begin the upload. It's all a bit rough around the edges and it needs a bit more work, better feedback to the user, more image info fields, etc.
A feature I might try to implement is to register if the original image was loaded from a Flickr photo page and then ask if the user wants to update the existing image or just upload to a new one. That shouldn't be too hard, I think. And of course more destinations, maybe Facebook and also something like ImageShack for quick and simple image hosting.
Other changes since last time
Most actions now let you apply them to a selected region of the image. Just drag a rectangular area on the image to make a selection. The selection stays active across actions until you click "Apply" on one of them, at which point the selection is reset.
To reduce the risk of forgetting to click "Apply" after setting the parameters for an editing action, the "Apply" button is now highlighted when any of the parameters are changed. If there are no parameters, eg. the invert action, the button will always be highlighted just as it will be for those actions where there are no "non-image-changing" default parameters (for instance the "mosaic" action, no value for the block size will leave the image untouched).
If you still manage to move on to something else without committing your changes, you can simply go back to the action you came from and the settings should be intact and ready for you to apply. I hope that's a reasonable compromise but I'm open to suggestions on how to improve the process.
Have fun
In case you missed it, you can find the Ubiquity commands here where you'll also have a few images to play around with if you're too lazy to find some yourself.Be sure to let me know what you think. And since the web is such a hostile environment there might some pages where things get messed up, just give me links so I can check it out.
So, have fun, I know I will. That special Roskilde Festival type of fun! Back in a weeks time.
found small bug: when cropping an image if you make a selection inside the image and press reset, the x, y, with and height values are reset, but the selection stays.
July 10, 2009 at 2:08 PM klmdbanother small bug:
July 10, 2009 at 2:17 PM klmdbwhen editing hue/saturation/lightness, changing the hue factor doesn't function like the photoshop hue change. Or it does, but only if you select the 'Colorize' option.
In PS, if you dont select Colorize, all color values are shifted somehow. If you do, all saturation is set to 0, and a color overlay in the selected hue color is applied.
2 more notes :p
July 10, 2009 at 2:30 PM Jacob Seidelin- if you move your cursor beween different history thumbnails, the image always changes back to the current. Maybe it would be better it didn't?
- how about adding a simple paint function? I'm sure it cant be hard to add some draw tools.
Thanks for the bug reports! :-)
July 13, 2009 at 12:33 AM AnonymousSimple painting as well as text are already planned. Nothing more advanced than MS Paint probably.
Just discovered your blog -- great stuff! Have to remember to subscribe when I get home.
August 4, 2009 at 6:13 AM Jacob SeidelinJust letting you know in IE (forced to use at work) you have google ads blocking the comments, let me know if you want me to get a screen capture.
~Matt
Thanks, I see it. Looks fine in IE8, though. I'll get it fixed anyway.
August 4, 2009 at 6:34 AM accessoires photoHello,
September 24, 2009 at 3:46 AM UnknownThanks so much for the great resources on your blog.
Photo editing with Ubiquity software is so easy.the person who is new in photo editing field is more effective with this software.
November 9, 2009 at 2:10 AM Unknownr4 ds
All the information about Ubiquity illustrated in this post sounds great.But only after its practical use it can be said how much beneficial and useful it is.I wish it proves to be the same as stated in this post.
December 8, 2009 at 3:56 AM AnonymousMio Navman Spirit V505
Hi guys
May 14, 2010 at 3:36 AM photo editing servicesPhoto editing services company offers wide range of photo editing service to to restore old photos. Photo retouching services transform photos from ordinary to extra ordinary, restore damaged photos, pictures restoration.
Hi guys
June 3, 2010 at 10:47 PM SteveI like it blog.
One feature that I could try to implement is to detect if the original image has been loaded from a Flickr photo page and then ask if the user wishes to update the existing image or just download new. It should not be too difficult, I think. And of course several destinations, perhaps something on Facebook and ImageShack for image hosting fast and easy.
September 6, 2010 at 11:59 AM personal loanstranslation services
Most of the actions now, you can apply to a selected area of the image. Drag a rectangle to make a choice. The selection will remain active for all the action only after you click Apply one of them, so that the selection is canceled.
October 28, 2010 at 7:54 AM lasley heraldThis reverse action about the button will always be identified as it will be easy for the shares where there is no-change image default settings such as mosaic of the action.
September 29, 2011 at 10:54 AM GroupdmtMantek Lubemaster
Digital image editing software and drawing programmes to manipulate images .
November 30, 2012 at 3:18 AMImage Editing Service