Rotate an image in clockwise & Anti Clockwise direction

Question

I have used http://raphaeljs.com/image-rotation.html raphel's script but. How how can v save this rotated image.

Answer 1

It's an SVG, not really an image per-se.

You'll have to save the generated SVG via AJAX onto your server and render it with an external SVG-rendering library.

You could try librsvg2-bin, as I've heard that it works.

Answer 2

As mentioned it's an SVG element and it uses a source image to change it's angle upon clicking the rotate buttons. By inspecting the rotated image you'll see the SVG element like:

<image x="160" y="120" width="320" height="240" preserveAspectRatio="none" href="http://raphaeljs.com/bd.jpg" transform="rotate(-90, 320, 240)"/>

You'll notice that there's a tranform attribute that contains the rotate(angle, x, y) function. If you can find a way to get that angle value you can use it to manipulate the image source to generate a new image using PHP by using the imagerotate function.

By doing this I got the transform attribute value:

document.getElementById('holder').getElementsByTagName('image')[0].getAttribute('transform')

This returns "rotate(-90, 320, 240)"

Of course this is a hack ;p