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

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

HTML

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

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

Javascript

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

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

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

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

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

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

代碼中，我們創(chuàng)建canvas元素對象，并將圖片賦予canvas對象，當變量n處于不同的狀態(tài)(上下左右四個方向)時，使用canvas重新對圖像進行繪制。

當然，圖片的旋轉效果實現(xiàn)還有一種解決方案，繞開html5，針對各不同的瀏覽器，比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但這并不如html5的canvas實現(xiàn)的效果好。

以上所述就是本文給大家分享的全部內容了，希望大家能夠喜歡。