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

Question

14

你好，是否有办法在div内部顺时针或逆时针旋转图片？

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

我已经使用Matrix filter完成了这个功能。我想知道是否有可能在仅使用IE而不使用任何过滤器的情况下完成此操作。

- rahul

5个回答

12

如果你正在使用jQuery，那么jQueryRotate是一个小巧的插件（压缩后不到3Kb），可用于旋转图像：

- Paweł Witkowski Photography

更新到最新版本的链接。 - Paweł Witkowski Photography

3

我能想到的在IE浏览器上客户端旋转图片的唯一方法是使用滤镜。对于其他较新版本的浏览器，您可以使用

- Blixt

滤镜的问题在于应用矩阵滤镜后，图像的清晰度会在某种程度上降低。有没有什么方法可以避免这种情况？ - rahul

2

CSS3支持旋转，但它的支持不是很广泛。由于您请求JavaScript解决方案，这里有一个，但我认为您可能无法获得平滑的图像。

- Michal M

5

关于 JavaScript 解决方案的警告：即使对于像100x100这样小的图像，它也会生成10,000个div元素，每个元素都以图像作为其背景。当对更大的图像执行此操作时，这肯定会崩溃一些浏览器。 - Blixt

1

有另一种方法可以旋转图像，而不需要任何过滤器/HTML5...这种方法在现实世界中很糟糕且无用，但是可能。

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

文件大小和旧浏览器的支持会有一些限制，当然性能也很差。

- user1954035

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek · Accepted Answer

使用canvas，但也支持IE。