图片旋转处理

最新推荐文章于 2023-10-30 10:00:47 发布

shandong_chu

最新推荐文章于 2023-10-30 10:00:47 发布

阅读量1.1k

点赞数

分类专栏： JS—传说中的娇女文章标签： javascript border function 浏览器 360 n2

本文链接：https://blog.csdn.net/shandong_chu/article/details/4475538

版权

JS—传说中的娇女专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>