3

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

Improve this question

4 Answers 4

Reset to default
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:

You can find more informations about rotation with raphael here:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

Rotate image clockwise or anticlockwise inside a div using javascript

Improve this answer

1 Comment

raphael library seems more flexible thank you so much for suggestion :)
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.

Improve this answer

1 Comment

well :/ my customer is not ok with flash thanks for the suggestion :)
1

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.