Rotatable image or div with javascript?

I'm working on a web application that need to allow the user to drag and drop as well as rotate an image.

Drag and drop is solved with the jQuery UI Draggable.

But how am I suppose to rotate an image on the page? My images are mostly one colored rectangles. I used divs to draw them on the page but how to rotate them?

It is okay if they only rotate 22, 5-45-67, 5-90 degrees

So I think of 3 solutions

1. Using Canvas

   Problem: IE support

2. Using divs

   Problem: it also needs canvas to rotate

3. PHP GD

   This solution is the only hope that left.

   How it might work: The application will prerender (22,5*x) rotated versions of ori开发者_如何学Cginal image. So they will be ready whenever user wants to rotate an image.

Please help. Any suggestions appreciated

One possible solution is to use a JavaScript graphic vector library that can use automatically an alternative to canvas when used on IE.

Raphael is a really good one, give it a try:

• http://raphaeljs.com/

You can find more informations about rotation with raphael here:

• How do I rotate a div with Raphael.js?

take a look: http://www.dyn-web.com/code/rotate_images/

Rotate image clockwise or anticlockwise inside a div using javascript

The server side method sounds a bit wasteful (all versions of the image need to be downloaded), dare I say you should try using Flash for a cross-browser and client side solution.

You cannot manipulate image directly with Javascript other than resizing them (and this is technivally done with CSS, not Javascript...). The best solution would be to use Raphaël; it will allow you to ratate, but also drag and drop, and it is also built using JQuery.

Of course you could alternately use different image states and use them as "sprites" for your rotated rectangles, however you will not play extensibility there. (GD is a bad design, don't use that.)