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

8
votes

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!

4
javascriptflashgwtimage-processingclient-side
I sounds like Flash satisfies image consistency, scalability, image quality, and cross-platform development effort minus iOS. As both an Objective-C proficient individual and an ActionScript Developer, I tend to see the world through the view of "cover everything but iOS with Flash, and write an iOS app along with it." - Aaron
When is the delivery date? Does it need to be up and running in the next few months and if so remember that not everyone right now will be using a HTML5 compliant browser. FYI Microsoft's next browser, IE9 will support HTML5, but it wont work on Windows XP. - Allan
"no iPhone/iPad support" applies to Java too. Edit: I somehow managed to miss the "compiled to javascript with GWT" (strange :). - Lars Blåsjö
@Tegeril: yep, sounds like a reasonable way to go about it @Allan: good point. We do want a running version relatively soon, so that's a big negative for HTML5.. But how about just plain javascript without HTML5? @Lars: strange indeed :) - rod

4 Answers

5
votes

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.

Edit: Because I just received a downvote on a 3-year-old answer, I'm obligated to say that this is no longer true, and you should use web standards like <canvas> because they are pretty much ubiquitous these days. Don't use Flash.

2
votes

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 :)

1
votes

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 :)

1
votes

This post was created 4 years ago and now the scenario is pretty different, therefore I would like to complement the answers with something more up-to-date information.

  • Flash is not a good choice anymore since some browsers are blocking it and others are encouraging not using it for many reasons. Flash is not mobile friendly.
  • Java Applet has more restrictions than Flash. Currently it's only used when we don't have any other choice.
  • Silverlight presents the similar issues of Flash.
  • Javascript ecosystem has been evolving and now we have many frameworks to use it in the client-side, server-side and mobile. Javascript adoption and support is more matured now. Therefore, now I think Javascript is the best choice by far.

For developers looking for client-side image processing I recommend the following basic example:
Processing an Image Before Uploading to a Server

You can use this same framework to develop mobile apps:
Getting Started with Image Processing in Mobile Devices Using Javascript, Ionic and MarvinJ

Below a reference of javascript frameworks to manipulate images:

NOTE: I invite everyone to edit this asnswer and complement the list above.