萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js實現圖片旋轉的三種方法

js實現圖片旋轉的三種方法

 這篇文章主要介紹了js實現圖片旋轉的三種方法,需要的朋友可以參考下

1 使用jQueryRotate.js實現    示例代碼:  代碼如下: <!DOCTYPE html>  <html>  <head>  <title></title>  <style type="text/css">  #div1 {  width: 800px;  height: 600px;  background-color: #ff0;  position: absolute;  }  .imgRotate {  width: 100px;  height: 80px;  position: absolute;  top: 50%;  left: 50%;  margin: -40px 0 0 -50px;  }  </style>  </head>  <body>  <div id="div1">  <img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />  <input id="input2" type="button" value="btn2"></input>  </div>  </body>  <script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript" src="jQueryRotate.js"></script>  <script type="text/javascript">  var num = 0;  $("#input2").click(function(){  num ++;  $("#img1").rotate(90*num);  });  </script>  </html>    測試結果:chrome下效果正常,旋轉後img對象仍為img對象;ie8下效果正常,但旋轉後img對象變為下面對象,由於對象變化,若旋轉後仍按原來方法獲取img對象,則會報js錯誤。欲獲取image對象,可根據class獲取。如果圖像旋轉後,不進行其它操作,則可用此方法。若進行其它操作,如放大、縮小圖像,則此方法實現較復雜。   代碼如下: <span ...>  <rvml:group class="rvml"...>  <rvml:image class="rvml".../>  </rvml:group>  </span>    2 使用Microsoft提供的Matrix對象    示例代碼:   代碼如下: <!DOCTYPE html>  <html>  <head>  <title></title>  <style type="text/css">  #div1 {  width: 800px;  height: 600px;  background-color: #ff0;  position: absolute;  }  .imgRotate {  width: 100px;  height: 100px;  position: absolute;  top: 50%;  left: 50%;  margin: -50px 0 0 -50px;  }  #imgRotate {  width: 100px;  height: 100px;  position: absolute;  top: 50%;  left: 50%;  margin: -50px 0 0 -50px;  }  </style>  </head>  <body>  <div id="div1">  <img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />  <input id="input1" type="button" value="btn1"></input>  </div>  </body>  <script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript">  function rotate(id,angle,whence) {  var p = document.getElementById(id);    // we store the angle inside the image tag for persistence  if (!whence) {  p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;  } else {  p.angle = angle;  }    if (p.angle >= 0) {  var rotation = Math.PI * p.angle / 180;  } else {  var rotation = Math.PI * (360+p.angle) / 180;  }  var costheta = Math.cos(rotation);  var sintheta = Math.sin(rotation);    if (document.all && !window.opera) {  var canvas = document.createElement('img');    canvas.src = p.src;  canvas.height = p.height;  canvas.width = p.width;    canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";  } else {  var canvas = document.createElement('canvas');  if (!p.oImage) {  canvas.oImage = new Image();  canvas.oImage.src = p.src;  } else {  canvas.oImage = p.oImage;  }    canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);  canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);    var context = canvas.getContext('2d');  context.save();  if (rotation <= Math.PI/2) {  context.translate(sintheta*canvas.oImage.height,0);  } else if (rotation <= Math.PI) {  context.translate(canvas.width,-costheta*canvas.oImage.height);  } else if (rotation <= 1.5*Math.PI) {  context.translate(-costheta*canvas.oImage.width,canvas.height);  } else {  context.translate(0,-sintheta*canvas.oImage.width);  }  context.rotate(rotation);  context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);  context.restore();  }  canvas.id = p.id;  canvas.angle = p.angle;  p.parentNode.replaceChild(canvas, p);  }    function rotateRight(id,angle) {  rotate(id,angle==undefined?90:angle);  }    function rotateLeft(id,angle) {  rotate(id,angle==undefined?-90:-angle);  }  $("#input1").click(function(){  $("img.imgRotate").attr("id","imgRotate");  rotateLeft("imgRotate",90);  $("#imgRotate").attr("top","50%");  $("#imgRotate").attr("left","50%");  $("#imgRotate").attr("margin","-50px 0 0 -50px");  });  </script>  </html>    測試結果:chrome下效果正常,但旋轉後img對象變為canvas對象;ie8下效果正常,旋轉後img對象仍為img對象。Matrix()參數較多,使用時需較多計算。    3 使用Microsoft提供的BasicImage對象    示例代碼:  代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  </head>  <body>  <img id="image" src="http://www.baidu.com/img/logo-yy.gif" />  <input id="input2" type="button" value="btn2"></input>  </body>  <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript">  var num = 0;  $("#input2").click(function(){  num = (num + 1) % 4;  document.getElementById('image').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+num+')';  });  </script>  </html>    測試結果:chrome下不能旋轉;ie8下效果正常,旋轉後img對象仍為img對象。BasicImage()僅一個參數。    查看這三種方法的代碼會發現,本質上是一種解決方案:chrome下使用canvas對象實現,ie8下使用VML或者Matrix()或BasicImage()實現。本人近期改造一個組件:其中涉及到旋轉、放大圖片,由於jQueryRotate.js在ie8下會生成一個新的對象,導致放大圖片前選擇圖片時,需要進行特殊處理。後決定對chrome、ie8分開處理,chrome下使用jQueryRotate實現,ie8下使用BasicImage()實現,保證了代碼的簡潔性和可讀性。 
copyright © 萬盛學電腦網 all rights reserved