图片旋转处理js

<html>
<head> 
<title>title>   
<script type="text/javascript">
function rotateImage(HTMLControlID,degree) {  
  
if(window.navigator.userAgent.indexOf('MSIE') > -1)
   {   
   
//处理IE浏览器
          var imageToRotate = document.getElementById(HTMLControlID);

          imageToRotate.style.filter
= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
        
var deg2radians = Math.PI * 2 / 360;
         
var degreeToRotate =degree // 旋转度数; 
       rad = degreeToRotate * deg2radians ;        
       costheta
= Math.cos(rad);         
       sintheta
= Math.sin(rad);   
        
       imageToRotate.filters.item(
0).M11 = costheta;         
       imageToRotate.filters.item(
0).M12 = -sintheta;        
       imageToRotate.filters.item(
0).M21 = sintheta;         
       imageToRotate.filters.item(
0).M22 = costheta; 
    
   
var w=document.getElementById(HTMLControlID).width;
   
var h=document.getElementById(HTMLControlID).height;
   
    document.getElementById(HTMLControlID).width
=h;
    document.getElementById(HTMLControlID).height
=w;
    n
+=1;
   
if(n<2)
    {
        rotateImage(HTMLControlID,degree);
    }
   
else
    {
        n
=0;
    }
   
  }     
}          
script>
head>

<body>
<table width="100%" height="100%" border="0">
<tr><td>
<A href="javascript:rotateImage('imgRotate' , 90);">旋转90度A>
<A href="javascript:rotateImage('imgRotate' , 180);">旋转180度A>
<A href="javascript:rotateImage('imgRotate' , 270);">旋转270度A>
<A href="javascript:rotateImage('imgRotate' , 360);">原图A>td>tr>
<tr><td>
<canvas id="canvas" ><img id="imgRotate" src="bd8dcf53-3c57-49cd-8221-0ffc03a155dc.jpg" />
canvas>td>tr>table>
body>
html>
<script>
var n=0;
script>

你可能感兴趣的:(功能代码片段集锦)