[英]Rotate an image in clockwise & Anti Clockwise direction
I have used http://raphaeljs.com/image-rotation.html raphel's script but.我用过http://raphaeljs.com/image-rotation.html raphel 的脚本但是。 How how can v save this rotated image.
如何保存这个旋转的图像。
It's an SVG, not really an image per-se.这是一个 SVG,并不是真正的图像本身。
You'll have to save the generated SVG via AJAX onto your server and render it with an external SVG-rendering library.您必须通过 AJAX 将生成的 SVG 保存到您的服务器上,并使用外部 SVG 渲染库进行渲染。
You could try librsvg2-bin
, as I've heard that it works.您可以尝试
librsvg2-bin
,因为我听说它有效。
As mentioned it's an SVG element and it uses a source image to change it's angle upon clicking the rotate buttons.如前所述,它是一个 SVG 元素,它使用源图像在单击旋转按钮时更改其角度。 By inspecting the rotated image you'll see the SVG element like:
通过检查旋转图像,您将看到 SVG 元素,如:
<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.您会注意到有一个包含
rotate(angle, x, y)
function 的tranform
属性。 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.如果您能找到获得该角度值的方法,您可以使用它来操作图像源以使用 PHP 通过使用imagerotate function 生成新图像。
By doing this I got the transform
attribute value:通过这样做,我得到了
transform
属性值:
document.getElementById('holder').getElementsByTagName('image')[0].getAttribute('transform')
This returns "rotate(-90, 320, 240)"
这将返回
"rotate(-90, 320, 240)"
Of course this is a hack;p当然这是一个 hack;p
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.