使圖片旋轉的3個解決方案_基礎知識

圖片旋轉效果的研究
最近在專案中需要做圖片的旋轉功能，我研究了一下。以下來總結下圖片旋轉在各個瀏覽器的支援情況

一、圖片旋轉的方案

1）css3實作圖片旋轉功能：支援的瀏覽器有chrome，firefox；opera是不支援的。

具體程式碼為：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上述程式碼的意思就是將圖片順時針旋轉90度，其實可以旋轉任意的度數。但支援css3的瀏覽器只有chrome，firefox3.6 ，safari，ie瀏覽器是不支援的。那麼IE
下該怎麼處理呢？於是就有了下面的一個方案

2）在IE下通濾鏡來實現旋轉

具體程式碼為：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
這裡的rotation 參數可以是0,1,2,3 ，表示的意思就是這些數字乘以90後的旋轉角度。 IE下如果要旋轉任意的角度要用到矩陣變換濾鏡，我們在日常的使用過程中，
大部分使用的是變換90的倍數，這裡就不討論任意的角度了。但還是有問題的，如果非ie瀏覽器，不支援CSS3，那麼如果實現圖片的旋轉呢，其實canvas也是可以圖片旋轉的。

3）用canvas來實現圖片的旋轉

canvas在chrome，firefox，opera等瀏覽器中均支持，他是有一個基於 JavaScript 的繪圖 API，。首先我們來看看怎麼利用canvas JavaScript來實現圖片的旋轉

程式碼如下：

複製程式碼

複製程式碼

程式碼

var test = function(){
        var canvas = document.getElementById("result");
             canvas.height = 300;
        canvas.width = 200;
        var context = canvas.getContext("2d");
   translate(200,0);
        context.rotate (Math.PI/3);
        context.drawImage(oImg, 0, 0, 300, 200);
      🎜 >};

上述程式碼先得到一個canvas對象，然後設定他的高度，開始繪圖了。這個改變canvas的中心點和旋轉角度，然後將圖片畫到canvas中去，將其儲存起來，然後

隱藏先前的圖片。這種方法實作還是比較平滑的。

二、各種方案的對比

css3的實現方案，不會改變原始圖片所佔空間的大小的，但是ie下的濾鏡會改變圖片所佔空間的大小。 其實ie下也是可以支援canvas的，只需要引用一個canvas的腳本。這個是有google提供的一個。但這個腳本有點大，沒有壓縮前有20多k
我比較建議在ie下使用濾鏡來實現，其他的瀏覽器使用canvas 標籤來實現。