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

【问题标题】：Rotate image clockwise or anticlockwise inside a div using javascript使用javascript在div内顺时针或逆时针旋转图像
【发布时间】：2009-06-09 07:24:42
【问题描述】：

嗨，有没有一种方法可以让我在 div 中顺时针或逆时针旋转图像。

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

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

【问题讨论】：

标签： javascript image-manipulation rotation

【解决方案1】：

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

使用画布也支持IE

【讨论】：

【解决方案2】：

如果你使用 jQuery，jQueryRotate 是一个小型（小于 3Kb 的压缩+gzipped）插件，可以旋转图像：

http://jqueryrotate.com/

【讨论】：

更新了最新版本的链接

【解决方案3】：

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

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

【讨论】：

过滤器的问题在于，在应用矩阵过滤器后，图像的清晰度会有所降低。有没有办法避免这种情况？？

【解决方案4】：

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

【讨论】：

关于 JavaScript 解决方案的警告：即使是 100x100 的小图像，它也会生成 10,000 个 div 元素，每个元素都以图像为背景。在处理较大的图像时，这肯定会导致某些浏览器崩溃。

【解决方案5】：

还有其他方法可以在不使用任何过滤器/html5 的情况下旋转图像。它在现实世界中既讨厌又无用，但可能。

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

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

【讨论】：