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

Question

Hi all, 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. Thanks all in advance.

Answer 1

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 2

This might help. I'm no expert, but it looks like you can only have 90-degree increments in IE.

Answer 3

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 4

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.

Answer 5

Here's a starting point that works in WebKit. (I used Safari 4.) I haven't had to do any real math in ages, so you'll have to figure out the correct angle of rotation based on the distance of the drag. Also, the rotation box is offset slightly when you start rotating. They may be rotating around a different center point.

Answer 6

CSS3 supports rotation however at this time only chrome and safari support CSS3 rotation with webkit. Here's a nice example of rotation in CSS3. If you want to see if it works in your browser try this link. It should be a working clock.

For now troynts answer looks like your best bet.

In the future or with safari or chrome you can do this.

$(this).css('-webkit-transform','rotate(45deg)');

Answer 7

I'm using raphaeljs (raphaeljs.com). It will allow you to draw on a canvas. So you can first add a background rectangle, then add the image and finally rotate. Thus showing a border. As far as I could find, this is not possible with wilq32's rotate.