图片旋转处理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>