顺时针和逆时针方向旋转图像答案

【问题标题】：Rotate an image in clockwise & Anti Clockwise direction顺时针和逆时针方向旋转图像
【发布时间】：2011-04-28 04:12:31
【问题描述】：

我使用了http://raphaeljs.com/image-rotation.html raphel 的脚本，但是。如何保存这个旋转的图像。

【问题讨论】：

【解决方案1】：

这是一个 SVG，本身并不是真正的图像。

您必须通过 AJAX 将生成的 SVG 保存到您的服务器上，并使用外部 SVG 渲染库进行渲染。

您可以尝试librsvg2-bin，因为我听说它有效。

【讨论】：

【解决方案2】：

如前所述，它是一个 SVG 元素，它使用源图像在单击旋转按钮时更改其角度。通过检查旋转后的图像，您会看到如下 SVG 元素：

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

您会注意到有一个包含rotate(angle, x, y) 函数的tranform 属性。如果您能找到获得该角度值的方法，您可以使用它来操作图像源，以使用 PHP 使用 imagerotate 函数生成新图像。

通过这样做，我得到了transform 属性值：

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

这会返回"rotate(-90, 320, 240)"

当然，这是一个 hack ;p

【讨论】：