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

Using Canvas

Problem: IE support
Using divs

Problem: it also needs canvas to rotate
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

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

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?

edited May 23 '17 at 11:55

Community

1
1

answered Nov 29 '10 at 12:37

Alois Cochard

9,812
2
29
30

score 2 · Answer 2 · edited May 23 '17 at 12:29

2

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

Rotate image clockwise or anticlockwise inside a div using javascript

edited May 23 '17 at 12:29

Community

1
1

answered Nov 29 '10 at 12:38

AlexR

114,158
16
130
208

raphael library seems more flexible thank you so much for suggestion :) – Max Abrahamsson Nov 29 '10 at 12:49

score 1 · Answer 3 · answered Nov 29 '10 at 12:36

1

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.

answered Nov 29 '10 at 12:36

dain

6,475
1
38
47

well :/ my customer is not ok with flash thanks for the suggestion :) – Max Abrahamsson Nov 29 '10 at 12:49

score 1 · Answer 4 · answered Nov 29 '10 at 12:37

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

Rotatable image or div with javascript?

4 Answers4