Rotate image clockwise or anticlockwise inside a div using javascript

Question

HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.

I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.

I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.

Solution 1

If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:

http://jqueryrotate.com/

Solution 2

The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.

Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)

Solution 3

CSS3 supports rotation, but it isn't widely supported. As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.

Solution 4

There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.

You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.

There will be some limitation about filesize and support in old browser and of course terrible performance..

View more solutions

Comments

[Muhammad Huzaifa]

Just a warning regarding the JavaScript solution: even for an image as small as 100x100, it'll generate 10,000 div elements, each with the image as their background. This is sure to bring down some browsers when doing it to larger images.

[rahul]

The problem with filters is that after applying the matrix filter the clarity of the image is reduced to some extend. Is there a way to avoid this??

[Dliix]

Updated link to most recent version