开发者

Rotate an image in clockwise & Anti Clockwise direction

开发者 https://www.devze.com 2023-03-01 09:27 出处:网络
I have used http://raphaeljs.com/image-rot开发者_运维技巧ation.html raphel\'s script but. How how can v save this rotated image.It\'s an SVG, not really an image per-se.

I have used http://raphaeljs.com/image-rot开发者_运维技巧ation.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

0

精彩评论

暂无评论...
验证码 换一张
取 消