简体   繁体   中英

Rotate an image in clockwise & Anti Clockwise direction

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

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM