使用jQueryRotate.js与Matrix对象实现图像旋转-优快云博客

本文介绍如何使用jQueryRotate.js、Matrix对象和BasicImage对象在Chrome和IE浏览器中实现图像旋转，包括代码示例、测试结果及不同方法的优缺点对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 使用jQueryRotate.js实现

示例代码：

[html]view plaincopy 
   
 <!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对象

示例代码：

[html]view plaincopy 
   
 <!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对象

示例代码：

[html]view plaincopy 
   
 <!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()实现，保证了代码的简洁性和可读性。