Implementing a client-side image editor - what's the best way?

Question

We want a web app that allows a user to edit images on the browser and we're trying to decide which technology to use. We want to support simple image customization, such as high-quality resizing, cropping, image merging, and color transformations, as well as the addition of text elements with different fonts and colors.

The current options are:

1. Flash: no worries about cross-browser compatibility; could use same image library on client and server; no iPhone/iPad support.
2. Java (compiled to javascript with GWT): need to find a good image library in pure Java so it can be compiled to JS.
3. Plain old javascript + HTML5: may be a mess due to multiple browsers; may need to write image editing code from scratch.

Here's what's most important to us / criteria for choosing:

• Image consistency: the image that the client edits on the browser must be exactly the same as the one we'll eventually use on the backend. We can achieve this by (a) having the same library both on the client and server to process images, (b) having the client generate the image and upload it to the server, or (c) use two different image processing libraries on the client/server and hope for the best in terms of consistency. Option (a) seems best, but it would only be possible if we use Flash or Java/GWT. We don't like option (b) because the images are large; we'd rather save a sequence of operations to perform on a raw image than saving multiple transformed images. And we don't really know if option (c) is safe or not.
• Scalability: We prefer the client to do as much work as possible to decrease server load.
• Image quality must be kept high
• Cross-platform: We'd like to support as many platforms as possible without rewriting everything (big negative for Flash due to iPhone/iPads).

What path do you recommend? Are there any alternative we're missing?

Thanks for any help!

Answer 1

We went with 3 because Java applets are pretty much dead and we don't like Flash. HTML5 is, hopefully, the future.
GWT sounds like an interesting option but we couldn't use it because server side is .NET. Writing image editing code is fun :)

Answer 2

I would choose JS + HTML5\canvas. If you're just in the beginning of writing that app and there are no dependencies on technology, it's the best choice. Browsers are getting better rapidly in contrast to Flash or Java plugin(40-60% of desktops got it?). The only creepy monster that holds the revolution is IE, but I think IE9 will bring us to the new era, where we can make really cool cross-browser apps on the web using new standards :) So you can start now, and 2-3 months later IE9 will come with canvas support and all that fancy stuff. All other browsers are ready right now, but they will evolve and improve JS engine speed. I hope :)

Answer 3

Definitely Flash. If you go with JavaScript and HTML5, you are basically saying "screw you" to all the IE users. Flash's rendering engine is quicker for these things than the browser would be, and the speed would be consistent across all browsers. Also, Flash has very powerful image-manipulating libraries built-in, whereas in JavaScript you'd have to write them yourself.