圖片編輯器-旋轉篇

網頁圖片編輯之前一直很少接觸，為了達到使用者線上編輯的功能，因此規劃旋轉、裁切與圖片加字三個功能的小編輯器，感覺旋轉的功能比較簡單就從旋轉開始做起吧！ 因為本身是用jQuery進行開發，照慣例先去問問Google 大神有沒有先拜已經開發好的套件可以使用，果然推薦wilq32.RotateImage這個套件，在旋轉圖片上功能齊全，可以輸入任意角度、動畫旋轉及多瀏覽器支援，相當完整，還可以加入需要的event作為觸發，例如像mouseover或mouseout等事件。但是因為各家瀏覽器的關係，使每個瀏覽器執行該程式時都會依據特性去對圖片進行旋轉。基本上分為兩類作法，

1. 在IE上使用VML標籤語言，因此必須在body中加入下列宣告。
2.  其他瀏覽器則是採用canvas標籤達成圖片翻轉效果。

這個plugin執行時，除了產生新的翻轉圖片之外還會產生一個外框，此外框的長寬設定如下

img._widthMax=img._heightMax=Math.sqrt((height)*(height) + (width) * (width));

長寬設定為原本圖片長寬平方和開跟號，以保持圖片翻轉時的美觀； 但是在網頁中圖片的擺放位置與長寬設定基本上都是固定的，如果加入翻轉特效後，多了外框的空間會破壞原有的排版，所以就把外框的長寬改成跟原有圖片大小相符：

img._widthMax=img._heightMax=height > width ? height : width;

這樣在旋轉的時候就不會為版面傷腦筋啦！