如何用Photoshop中的“自由变换”等jQuery旋转图像？

Question

我到处搜索但是找不到如何用图像边框旋转（度）或者像jQuery中的'resizable'。我的意思是类似于Photoshop中的“自由变换”边框，它在图像的每个角落都有4个旋转位置。

Answer 1

我只能想到在javascript中这样做会使用canvas元素。

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

Answer 2

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

我不知道任何具有这种能力的JavaScript。这是一个人的实验，但结果并不是很好：

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

这也很酷，并使用Flash：

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

Answer 3

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

Answer 4

This可能有所帮助。我不是专家，但看起来你只能在IE中增加90度。

Answer 5

Here's a starting point适用于WebKit。 （我使用的是Safari 4.）我不需要做多年的真实数学运算，所以你必须根据阻力的距离找出正确的旋转角度。此外，当您开始旋转时，旋转框会略微偏移。它们可能围绕不同的中心点旋转。

Answer 6

CSS3支持rotation但是目前只有chrome和safari支持使用webkit进行CSS3轮换。这是CSS3中一个很好的example轮换。如果您想查看它是否适用于您的浏览器，请尝试此link。它应该是一个工作时钟。

现在，特洛伊特answer看起来是你最好的选择。

将来或使用safari或chrome你可以做到这一点。

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

Answer 7

我正在使用raphaeljs（raphaeljs.com）。它将允许您在画布上绘制。因此，您可以先添加背景矩形，然后添加图像，最后旋转。从而显示出边界。据我所知，wilq32的旋转是不可能的。