Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 275
rod Avatar asked Aug 13 '10 03:08

rod


2 Answers

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.

like image 91
Sasha Chedygov Avatar answered Nov 18 '22 16:11

Sasha Chedygov


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

like image 2
MK. Avatar answered Nov 18 '22 16:11

MK.