Rotatable image or div with javascript?

Question

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 original image. So they will be ready whenever user wants to rotate an image.

Please help. Any suggestions appreciated

Answer 1

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?