【js】js 讓圖片旋轉

 轉http://www.cnblogs.com/ustcyc/p/3760116.html

核心：
 canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMethod='auto expand')";
看起來像ie專屬的，ff chrome呢

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");
        var oImg = document.getElementById("Img");        
        canvas.height = 300;
        canvas.width = 200;
        var context = canvas.getContext("2d");
        context.save();
        context.translate(200,0);
        context.rotate(Math.PI/3);
        context.drawImage(oImg, 0, 0, 300, 200);
        context.restore();
        oImg.style.display = "none";
};
上述代碼首先得到一個canvas對象，然后設置他的高度，開始繪圖了。這個改變canvas的中心點和旋轉角度，然后將圖片畫到canvas中去，將其存儲起來，然后
隱藏之前的圖片。這種方法實現還是比較平滑的。

 

jquery版
轉http://blog.csdn.net/cangkukuaimanle/article/details/7414985