快捷導(dǎo)航

javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果

更新時(shí)間：2015年05月03日 15:41:31 投稿：hebedich

圖片的旋轉(zhuǎn)可以說(shuō)是一種效果，但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺(jué)效果那個(gè)范疇，其更具有使用性，功能性。照片有時(shí)候是需要橫過(guò)來(lái)的拍的，當(dāng)我們預(yù)覽或共享到web上時(shí)需要進(jìn)行旋轉(zhuǎn)。這個(gè)操作在以往可能更多的是交給軟件去完成，然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。

我們?cè)谖⒉┥峡梢詫?duì)圖片進(jìn)行向左轉(zhuǎn)向右轉(zhuǎn)等旋轉(zhuǎn)操作，讓用戶可以從不同的視角欣賞圖片效果。本文將結(jié)合實(shí)例為您講解如何使用Javascript結(jié)合相關(guān)技術(shù)來(lái)實(shí)現(xiàn)圖片的旋轉(zhuǎn)效果。我們使用HTML5的canvas標(biāo)簽可對(duì)圖片進(jìn)行旋轉(zhuǎn)操作，對(duì)于ie6，7，8不支持HTML5的瀏覽器，我們使用IE特有的濾鏡效果來(lái)實(shí)現(xiàn)圖片旋轉(zhuǎn)。

HTML

我們?cè)陧?yè)面中放置一張圖片，在圖片的上方放置兩個(gè)按鈕，通過(guò)onclick事件調(diào)用rotate()函數(shù)來(lái)控制圖片向左向右旋轉(zhuǎn)。

<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

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); 
  ... 
}

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

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

function rotate(obj,arr){ 
  ... 
  //對(duì)IE瀏覽器使用濾鏡旋轉(zhuǎn) 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 對(duì)現(xiàn)代瀏覽器寫入HTML5的元素進(jìn)行旋轉(zhuǎn)： canvas 
  }else{ 
    ... 
  } 
}

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

function rotate(obj,arr){ 
  ... 
  // 對(duì)現(xiàn)代瀏覽器寫入HTML5的元素進(jìn)行旋轉(zhuǎn)： 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); 
        break; 
    }; 
  } 
}

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

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

以上所述就是本文給大家分享的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: