使用javascript在div内顺时针或逆时针旋转图像

Question

HI，有没有办法可以顺时针或逆时针旋转div内的图像。

我有一个主要的固定宽度div [溢出设置为隐藏]，图像从数据库加载。有一个滚动条，用于显示div内的图像。单击图像时，我需要以顺时针或逆时针方向显示旋转动画。

我使用Matrix过滤器完成了它。我想知道是否可以在不使用任何过滤器的情况下在IE中完成。

Answer 1

试试这个：http://raphaeljs.com/image-rotation.html

使用canvas但也支持IE

Answer 2

如果您正在使用jQuery，jQueryRotate是一个小型（小于3Kb缩小+ gzip）插件，可以旋转图像：

http://jqueryrotate.com/

Answer 3

我能想到在IE中在客户端旋转图像的唯一方法是使用过滤器。对于其他浏览器，您可以使用<canvas> control。

您的替代方法是使用服务器端脚本来旋转图像。然后您可以发送有关如何使用JavaScript旋转它的信息（即生成图像的路径，例如/rotate?image=img.jpg&amount=90）

Answer 4

CSS3 supports rotation，但it isn't widely supported。 正如您要求使用JavaScript解决方案here's one，但我认为您无法获得流畅的图像。

Answer 5

还有其他方法可以在没有任何滤镜/ html5的情况下旋转图像..它在现实世界中是令人讨厌和无用的，但可能。

对于javascript，您可以将图像存储为像素数组。写函数用它来执行旋转并将其编码为base64数据库，bmp可以很容易并用它替换image.src。

旧浏览器中的文件大小和支持会有一些限制，当然还有糟糕的表现。