Check out my
new book!
HTML5 Games book
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.

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

The edit-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 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.

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.
⇓ 15 comments klmdb

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
klmdb

another small bug:

when 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.

July 10, 2009 at 2:17 PM
klmdb

2 more notes :p

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

July 10, 2009 at 2:30 PM
Jacob Seidelin

Thanks for the bug reports! :-)

Simple painting as well as text are already planned. Nothing more advanced than MS Paint probably.

July 13, 2009 at 12:33 AM
Anonymous

Just discovered your blog -- great stuff! Have to remember to subscribe when I get home.

Just 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

August 4, 2009 at 6:13 AM
Jacob Seidelin

Thanks, I see it. Looks fine in IE8, though. I'll get it fixed anyway.

August 4, 2009 at 6:34 AM
accessoires photo

Hello,
Thanks so much for the great resources on your blog.

September 24, 2009 at 3:46 AM
andrew

Photo editing with Ubiquity software is so easy.the person who is new in photo editing field is more effective with this software.

r4 ds

November 9, 2009 at 2:10 AM
Sheen

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.
Mio Navman Spirit V505

December 8, 2009 at 3:56 AM
sharperimage

Hi guys
Photo 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.

May 14, 2010 at 3:36 AM
photo editing services

Hi guys
I like it blog.

June 3, 2010 at 10:47 PM
steven

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.

translation services

September 6, 2010 at 11:59 AM
personal loans

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 herald

This 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.

Mantek Lubemaster

September 29, 2011 at 10:54 AM
Groupdmt

Digital image editing software and drawing programmes to manipulate images .
Image Editing Service

November 30, 2012 at 3:18 AM
Post a Comment