如何使用jQuery像Photoshop中的'自由变换'来旋转图像？

Question

我到处都是搜索，但无法找到如何旋转（度）与图像边界或类似jQuery中的'可调整大小'。我的意思是像Photoshop中的“自由变换”边框，它有4个位置可以在图像的每个角落旋转。

Answer 1

您可以使用IE的DirectX过滤器旋转图像，但我认为不会解决您的问题。你可能不得不使用诸如Flash或Silverlight之类的东西来完成这项工作。

我不知道任何具有这种功能的JavaScript。这里有一个家伙的实验，但结果不太好：

http://www.walterzorn.com/rotate_img/rotate_img.htm

这是很酷，和使用Flash：

http://www.swfir.com/examples/multiple/

Answer 2

This可能的帮助。我不是专家，但它看起来像在IE中只能有90度的增量。

Answer 3

只有我可以认为这样做在JavaScript中的方式将使用画布元素。

尝试使用以下插件： http://wilq32.googlepages.com/wilq32.rollimage222

Answer 4

如果你使用Javascript，为什么不让服务器所做的工作，并通过Ajax调用得到的结果？查看ImageMagick库（http://www.imagemagick.org/script/index.php）。如果最终用户是指定旋转参数的用户，请在javascript中捕获这些输入，将其发送回服务器以供ImageMagick（或其他库）处理，并更新图像客户端。

Answer 5

Here's a starting point在WebKit中有效。 （我使用了Safari 4.）我不需要在年龄上进行任何真正的数学计算，因此您必须根据拖拽的距离计算出正确的旋转角度。另外，旋转盒在开始旋转时略微偏移。他们可能会围绕不同的中心点旋转。

Answer 6

CSS3支持rotation但是在这个时候，只有Chrome和Safari支持CSS3与webkit旋转。这里有一个很好的在CSS3中旋转的example。如果你想看看它在你的浏览器中是否有效，试试这个link。它应该是一个工作时钟。

对于现在的troynts answer看起来像你最好的选择。

在未来或与safari或铬你可以做到这一点。

$(this).css('-webkit-transform','rotate(45deg)'); 

Answer 7

我正在使用raphaeljs（raphaeljs.com）。它可以让你在画布上画画。所以你可以先添加一个背景矩形，然后添加图像并最终旋转。因此显示一个边界。据我所知，wilq32的旋转是不可能的。