如何使用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的旋轉是不可能的。