javascript結合canvas實現圖片旋轉效果

 　　圖片的旋轉可以說是一種效果，但是逐漸旋轉已經不單單是屬於視覺效果那個范疇，其更具有使用性，功能性。照片有時候是需要橫過來的拍的，當我們預覽或共享到web上時需要進行旋轉。這個操作在以往可能更多的是交給軟件去完成，然後再將旋轉到正常角度的圖片發布到web上。

　　我們在微博上可以對圖片進行向左轉向右轉等旋轉操作，讓用戶可以從不同的視角欣賞圖片效果。本文將結合實例為您講解如何使用Javascript結合相關技術來實現圖片的旋轉效果。我們使用HTML5的canvas標簽可對圖片進行旋轉操作，對於ie6，7，8不支持HTML5的浏覽器，我們使用IE特有的濾鏡效果來實現圖片旋轉。

　　HTML

　　我們在頁面中放置一張圖片，在圖片的上方放置兩個按鈕，通過onclick事件調用rotate()函數來控制圖片向左向右旋轉。

　　?

1 2 3 4 5 6 7 <div id="tool">     <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a>     <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a>  </div>  <div id="img">     <img src="demo.jpg" width="460" height="305" alt="" id="myimg" />  </div>

　　Javascript

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 function rotate(obj,arr){    var img = document.getElementById(obj);    if(!img || !arr) return false;    var n = img.getAttribute('step');    if(n== null) n=0;    if(arr=='left'){      (n==0)? n=3:n--;    }else if(arr=='right'){      (n==3)? n=0:n++;    }    img.setAttribute('step',n);    ...  }

　　我們寫了個自定義函數rotate()，其中參數obj表示要旋轉的圖片對象的id，參數arr表示旋轉方向，固定兩個值:left(向左)和right(向右)。我們設置變量n是為了記錄上下左右四種旋轉狀態，點擊旋轉按鈕時可以保證持續的旋轉的狀態，即每次旋轉是在上次旋轉操作後的基礎上再次旋轉。

　　然後，我們要根據浏覽器的不同進行不同的處理，對於IE系浏覽器，可以使用他們特有的濾鏡來實現旋轉效果，雖然我們不建議使用濾鏡，但為了兼容IE老版本，我們不得不重操這把舊刀。

　　?

1 2 3 4 5 6 7 8 9 10 function rotate(obj,arr){    ...    //對IE浏覽器使用濾鏡旋轉    if(document.all) {      img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';    // 對現代浏覽器寫入HTML5的元素進行旋轉： canvas    }else{      ...    }  }

　　代碼中，我們使用document.all判斷是否為IE浏覽器，如果是則使用濾鏡，而對於firefox和chrome這樣的現代浏覽器，我們使用canvas來實現旋轉效果。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 function rotate(obj,arr){    ...    // 對現代浏覽器寫入HTML5的元素進行旋轉： canvas    }else{      var c = document.getElementById('canvas_'+obj);      if(c== null){        img.style.visibility = 'hidden';        img.style.position = 'absolute';        c = document.createElement('canvas');        c.setAttribute("id",'canvas_'+obj);        img.parentNode.appendChild(c);      }      var canvasContext = c.getContext('2d');      switch(n) {        default :        case 0 :          c.setAttribute('width', img.width);          c.setAttribute('height', img.height);          canvasContext.rotate(0 * Math.PI / 180);          canvasContext.drawImage(img, 0, 0);          break;        case 1 :          c.setAttribute('width', img.height);          c.setAttribute('height', img.width);          canvasContext.rotate(90 * Math.PI / 180);          canvasContext.drawImage(img, 0, -img.height);          break;        case 2 :          c.setAttribute('width', img.width);          c.setAttribute('height', img.height);          canvasContext.rotate(180 * Math.PI / 180);          canvasContext.drawImage(img, -img.width, -img.height);          break;        case 3 :          c.setAttribute('width', img.height);          c.setAttribute('height', img.width);          canvasContext.rotate(270 * Math.PI / 180);          canvasContext.drawImage(img, -img.width, 0);