图片旋转之一-点击“向左”“向右”旋转

文章摘自“鑫空间”

------------------------------------------------------------------------------------------------------

1、用CSS3加JS，点击文字使图片转90度（忽略低版本的浏览器）

<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{height:512px; text-align:center;}
.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
</style>

<script type="text/javascript">
window.onload = function(){
	var param = {
		right: document.getElementById("rotRight"),
		left: document.getElementById("rotLeft"),
		img: document.getElementById("rotImg"),
		rot: 0
	};
	var fun = {
		right: function(){
			param.rot +=1;
			param.img.className = "rot"+param.rot;
			if(param.rot === 3){
				param.rot = -1;	
			}
			return false;
		},
		left: function(){
			param.rot -=1;
			if(param.rot === -1){
				param.rot = 3;	
			}
			param.img.className = "rot"+param.rot;			
			return false;
		}
	};
	param.right.onclick = function(){
		fun.right();
	};
	param.left.onclick = function(){
		fun.left();
	};
};
</script>

<div class="rot_box">
    <p><a id="rotLeft" class="l" href="javascript:void(0);">&lt;&lt;向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转&gt;&gt;</a></p>
     <div class="image_box">
           <img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
     </div>
</div>

2、用JQ，点击文字使图片转90度（IE下有时不正常）

<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{text-align:center;}
</style>

<script type="text/javascript" src="../js/jquery-1.82.js"></script>
<script type="text/javascript" src="../js/jquery.rotate.js"></script>
<script type="text/javascript">
$(function(){
	var param = {
		right: $("#rotRight"),
		left: $("#rotLeft"),
		box: $("#imgBox"),
		rot: 0
	};
	var fun = {
		right: function(){
			param.rot += 90;
			$("#rotImg").rotate(param.rot);
			if(param.rot === 270){
				param.rot = -90;	
			}
			return false;
		},
		left: function(){
			param.rot -= 90;
			if(param.rot === -90){
				param.rot = 270;	
			}
			$("#rotImg").rotate(param.rot);			
			return false;
		}
	};
	param.right.click(function(){
		if(!$("img#rotImg").length){
			param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
		}
		fun.right();
		return false;
	});
	param.left.click(function(){
		if(!$("img#rotImg").length){
			param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
		}
		fun.left();
		return false;
	});		   
});
</script>

<div class="rot_box">
    <p><a id="rotLeft" class="l" href="javascript:void(0);"><<向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转>></a></p>
     <div class="image_box">
           <img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
     </div>
</div>

其中jquery.rotate.js的内容：

jQuery.fn.rotate = function(angle,whence) {
	var p = this.get(0);

	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}

	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.round(Math.cos(rotation) * 1000) / 1000;
	var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
	//alert(costheta+","+sintheta);
 
	if (document.all && !window.opera) {
		var canvas = document.createElement('img');

		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;

		canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
		} else {
			canvas.oImage = p.oImage;
		}

		canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
		canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

		var context = canvas.getContext('2d');
		context.save();
		if (rotation <= Math.PI/2) {
			context.translate(sintheta*canvas.oImage.height,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-costheta*canvas.oImage.height);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-costheta*canvas.oImage.width,canvas.height);
		} else {
			context.translate(0,-sintheta*canvas.oImage.width);
		}
		context.rotate(rotation);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
		context.restore();
	}
	canvas.id = p.id;
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
	this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
	this.rotate(angle==undefined?-90:-angle);
}

3、用canvas标签，点击文字使图片转90度（IE不支持，但调用一个Google开发的插件excanvas.js就好）

<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{text-align:center;}
.image_box img{margin-top:-150px;}
</style>

<!--[if IE]><script type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
<script type="text/javascript">
window.onload = function(){
	var param = {
		right: document.getElementById("rotRight"),
		left: document.getElementById("rotLeft"),
		img: document.getElementById("rotImg"),
		cv: document.getElementById("canvas"),
		rot: 0
	};
	var rotate = function(canvas,img,rot){
		//获取图片的高宽
		var w = img.width;
		var h = img.height;
		//角度转为弧度
		if(!rot){
			rot = 0;	
		}
		var rotation = Math.PI * rot / 180;
		var c = Math.round(Math.cos(rotation) * 1000) / 1000;
		var s = Math.round(Math.sin(rotation) * 1000) / 1000;
		//旋转后canvas标签的大小
		canvas.height = Math.abs(c*h) + Math.abs(s*w);
		canvas.width = Math.abs(c*w) + Math.abs(s*h);
		//绘图开始
		var context = canvas.getContext("2d");
		context.save();
		//改变中心点
		if (rotation <= Math.PI/2) {
			context.translate(s*h,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-c*h);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-c*w,canvas.height);
		} else {
			context.translate(0,-s*w);
		}
		//旋转90°
		context.rotate(rotation);
		//绘制
		context.drawImage(img, 0, 0, w, h);
		context.restore();
		img.style.display = "none";	
	}
	var fun = {
		right: function(){
			param.rot += 90;
			rotate(param.cv, param.img, param.rot);
			if(param.rot === 270){
				param.rot = -90;	
			}	
		},
		left: function(){
			param.rot -= 90;
			if(param.rot === -90){
				param.rot = 270;	
			}
			rotate(param.cv, param.img, param.rot);			
		}
	};
	param.right.onclick = function(){
		fun.right();
		return false;
	};
	param.left.onclick = function(){
		fun.left();
		return false;
	};
};
</script>

<div class="rot_box">
    <p><a id="rotLeft" class="l" href="javascript:void(0);"><<向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转>></a></p>
     <div class="image_box">
           <img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
     </div>
</div>

插件可以在“鑫空间”下载http://www.zhangxinxu.com/study/js/excanvas.js