IE8、9、10下圖片旋轉
這裡兩天要實現一個功能，圖片左右旋轉
很是頭大，在網上收集資料就花了2.5天+最後加上實際應用ie8 ，ie9 ，ie19上出現的各種問題+ 解決問題
在網上找了各種資料，瞭解到旋轉又以下幾種實現方案：
1，filer
2，transform
3，canvas
4，jquery
第一步：先判斷ie版本（這裡直說ie，因為我們的專案只支援ie）
這裡要單獨說ie10 了，一般的方法是不行的，因為ie有 strict mode 嚴格模式
（quirks mode和strict mode是瀏覽器解析css的兩種模式，或者可以稱之為解析方法）
法一：
function Ie10Vesion(){
var b_version=navigator.appVersion;
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(trim_Version=="MSIE10.0" ){
return "10";
}else if(trim_Version=="MSIE9.0"){
return "9";
}else{
return trim_Version;
}
};
這種判斷方式在正真的ie10瀏覽器上是無用的那麼要用第二種了，這是在googl上找到方法，百度沒找到（花了一個上午才找到這個方法哦）
法二：
function IeVesion(){
var b_version=navigator.appVersion;
var isIE10 = /MSIE\s+10.0/i.test(navigator.userAgent)&& (function() {"use strict";return this === undefined;}());
if(isIE10){
trim_Version = "IE10";
}
else if(navigator.appName == "Microsoft Internet Explorer" && b_version.match(/9./i)=="9.")
{
trim_Version = "IE9";
}
return trim_Version;
}
法二這種方法在ie10上可以判斷，是因為了解了10版本的特性是嚴格模式
var hasStrictMode = (function() {
"use strict";
return this === undefined;
}());
如果這個hasStrictMode 方法返回true則是了
來個小插曲，在這裡判斷ie版本的時候我被坑了一天，因為我們系統裡有人加了這一句搞得哦在ie10和ie9下都是alert（IE9）
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
這些挨千刀的。。。。
html中：
<img id="view-image" src="" />
javascript中：
第二步：各種測試
前面已經講過判斷ie版本的操縱，我就直接開始各種方法試了，雖然實際中我是先實驗過了才知道要區分ie版本的，嘻嘻。
1，filer濾鏡只能在ie8下版本使用（到目前為止2014-5-30 13:52:11），實踐證明image圖片標籤在ie9和ie10需要用不同的東東來實現
程式碼：
var p;
var img = document.getElementById("view-image");
img.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation="+p+");";
這裡的p是0 、1、2、3；0是還原，1=90°、2=180°、3=270°
filer不能在ie9 和ie10上使用。
2，transform css樣式各個版本都支援，之前看到這個的時候我背js檔案和css的樣式結構給嚇到了，因為我不會寫css，然後放棄用了canvas，後面canvas 和img中我專案的html結構問題，最終我還是採用了css的transfer來做旋轉了，這個就一句話的事，比filter濾鏡還簡單，這個發現還是在我家親愛的幫助下.......
var p;
var img = document.getElementById("view-image");
img.style.transform="rotate("+p+"deg)";
這裡的p是時間旋轉的度數，0是還原，如果要旋轉45°那麼p就是45,90°那麼就是90 180°那麼就是180
3，canvas 畫布，哈哈重點來了，這就是我搞了3天 就為了做個旋轉的，我覺得這個很有意思，我家親愛的給了我一本書，叫我看，也是因為給了一本書我才決定把這一個星期的東西給總結下。
我的目標是把圖片左右旋轉，也不影響之前的其他放大、縮小、左右上下移動、的功能。在經歷過把canvas標籤和imag標籤合用的痛苦過程後，我才覺悟，原來我只要一個canvas就可以實現了，原來的image我可以不實用了，下面就來看下，我是怎麼弄的吧。
思路:搞一個canvas畫布，把動態獲取的圖片jpg的插入到canvas，接下來的操作就直接把畫布作為物件就好了；再直接canva的屬性，合理運用就可以了。我看qq控制元件的圖片旋轉也是用的canvas，當然我是使用的ie10瀏覽器的。放鬆心情..其實之前很苦惱....呵
//插入圖片到畫布
function drawAA(){
var aa= new Image();
aa.src = "xx.jpg";
if(aa.complete){
var mycanvas = document.getElementById("canvas");
var myctx = mycanvas.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}else{
alert('美女載入失敗，請重試');
}
}
canvas方法：
save：儲存狀態；
clearRect：清除畫布；
translate：水平/垂直移動座標；
rotate：旋轉座標；
scale：縮放座標；
drawImage：插入影象；
restore：恢復狀態。
canvas必須在html5的網頁上才用的！
4，jquery 沒做，不記錄
好就寫到這裡了，眼花了。