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

时间:2009-06-09 07:24:42

标签: javascript image-manipulation rotation

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

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

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

5 个答案:

答案 0 :(得分:15)

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

使用canvas但也支持IE

答案 1 :(得分:12)

如果您正在使用jQuery,jQueryRotate是一个小型(小于3Kb缩小+ gzip)插件,可以旋转图像:

http://jqueryrotate.com/

答案 2 :(得分:3)

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

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

答案 3 :(得分:2)

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

答案 4 :(得分:1)

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

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

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