注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

图片旋转处理js

JavaScript 水墨上仙 2836次浏览 已收录 手机上查看

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


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明图片旋转处理js
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
水墨上仙
……
加载中……