求教js实现图片的旋转

IE上并没有解决方案只能90度90度的转
其他浏览器上可以用CSS3转

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="style/reset.css" rel="stylesheet" type="text/css" />
<link href="style/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">
</script>
</HEAD><BODY>
<div id="container">
<div class="head">
<h1>CSS+JS实现图片旋转</h1>
<h2>(<a href="http://www.chinesefeng.com">前端技术</a>)-<strong><a href="http://www.zfsoft.com">zfsoftUED</a></strong></h2>
</div> <div class="info">
<h3><span>相关说明</span></h3>
<ul>
<li><strong>文档类型：</strong>XHTML 1.0 Transitional</li>
<li><strong>测试通过：</strong>IE6+,FF3+,Chrome</li>
<li><strong>应用范围：</strong>方便用户查看一些扫描进数据库,但是显示不正常的图片.</li> </ul>
</div>
<div class="content">
<img src="9.jpg" id="pic_xz" alt="顺时针旋转图片" />
</div>
</div>
</BODY>
</HTML>

#6楼
IE下
DXImageTransform.Microsoft.BasicImage
只能90度90度的转其他浏览器下，没必要用Canvas

建议lz，其他浏览器下用CSS3,IE下用google提供的js，动态模拟canvas。要么就全用Canvas，要么全Flash

想兼容IE的话楼上是好办法如果楼主FLASH好的话用FLASH是最省事

IE + Webkit 其余可以看6楼的canvas实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ImageRotation </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand");}
</style>
</head>
<body>
<div id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
<div id="demo">
<img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
</div>
</div>
<script>
var canTransition = function() {
var el = document.createElement('foo');
el.style.cssText = '-webkit-transition: all .5s linear;';
return !!el.style.webkitTransitionProperty;
}();
var o = document.getElementById('demo');
function rotationImg() {
if (document.all) {
var i = 0, j = 0, vx = 0, vy = 0, exp = 1/36;
function run(angle) {
j++;
vx = Math.cos(angle * Math.PI / 180) * j * exp;
vy = Math.sin(angle * Math.PI / 180) * j * exp;
with(o.filters.item(0)) {
M11 = M22 = vx; M12 = -(M21 = vy); M22 = vx;
}
o.style.top = (333 - o.offsetHeight) / 2 + 'px';
o.style.left = (500 - o.offsetWidth) / 2 + 'px';
}
function doRotation() {
o.onfilterchange = doRotation;
i += 10;
if (i > 359) {
i = 0;
o.onfilterchange = null;
}
run(i);
}
doRotation();
} else {
if (canTransition) {
o.style.webkitTransition = '-webkit-transform 1s ease-in';
o.style.webkitTransform='rotate(360deg)';
}
}
}
window.onload = function() {
rotationImg();
o.onclick = function() {
rotationImg();
}
}
</script>
</body>
</html>

原来微软还有DXImageTransform.Microsoft.Matrix矩阵，受教了

参考楼上的实现，单单旋转的话，可以不用Canvas，实现全浏览器兼容(opera还没试过)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ImageRotation </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
#demo { cursor:pointer; position:absolute;}
</style>
<script type="text/javascript" src="base.src.js"></script>
<script type="text/javascript">
window.onload = function() {
rotate(document.getElementById('demo'), 10);
};
</script>
</head>
<body>
<div id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
    <div id="demo">
        <img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
    </div>
</div>
</body>
</html>base.src.jsvar
userAgent = navigator.userAgent,
isIE = /msie/i.test(userAgent) && !window.opera,
isWebKit = /webkit/i.test(userAgent),
isFirefox = /firefox/i.test(userAgent);
function rotate(target, degree) {
if (isWebKit) {
target.style.webkitTransform = "rotate(" + degree + "deg)";
} else if (isFirefox) {
target.style.MozTransform = "rotate(" + degree + "deg)";
} else if (isIE) {
//chessDiv.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + degree + ")";
degree = degree / 180 * Math.PI;
var sinDeg = Math.sin(degree);
var cosDeg = Math.cos(degree);

target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +
"M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')";
} else {
target.style.transform = "rotate(" + degree + "deg)";
}
}

谢谢，各位，我还想问一下，如何计算偏转角度呢，我用Math函数计算，取当前图片的坐标，然后，取到mousedown时候鼠标的坐标，取到一个角度，然后再mouseup的时候在取一个角度，相减就是偏转角度，，是根据顺时针和逆时针，以及偏转角度是大于90或者180度分别计算的，但是怎么总是有错误呢，是我计算的方式不对，还是考虑的不对？麻烦在请教一下？

太谢谢了,呵呵,找了半天,rainsilence高人啊

调试易

求教js实现图片的旋转

解决方案 »