How to rotate image with jQuery like 'Free Transform' in Photoshop?

Question

I've searched everywhere but can't find how to rotate(degree) with image border or something like 'resizable' in jQuery. What I mean is something like 'Free Transform' border in Photoshop which has 4 place to rotate at each corner of image.

Answer 1

Only way I can think to do this in javascript would be using the canvas element.

Try using the following plugin: http://wilq32.googlepages.com/wilq32.rollimage222

Answer 2

You can rotate images with IE's DirectX filters, but I don't think will solve your issue. You may have to use something like Flash or Silverlight to get that job done.

I'm not aware of any JavaScript that has that kind of power. Here's one guy's experiment, but the outcome isn't very good:

http://www.walterzorn.com/rotate_img/rotate_img.htm

This is pretty cool too, and uses Flash:

http://www.swfir.com/examples/multiple/

Answer 3

If you're using Javascript, why not let the server do the work and get the result via an ajax call? Check out the ImageMagick libraries (http://www.imagemagick.org/script/index.php). If the end-user is the one specifying rotation parameters, capture those inputs in javascript, send it back to the server for processing by ImageMagick (or another library), and update the image client side.