首先引用文件

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css">
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  <script type="text/javascript" src="scripts/jQueryRotate.js"></script>

一款图片截取+预览功能的jquery插件功能强大得多了，以前只有预览截取部分的图片，而这款包括了多了以下功能： 1、图片左右旋转 2、生成不同规格的图片略缩图

$(document).ready(function (){
		function adjust(el, selection) {
			var scaleX = $(el).width() / (selection.width || 1);
			var scaleY = $(el).height() / (selection.width || 1);
			$(el+' img').css({
				width: Math.round(scaleX*$('#avatar').width() ) + 'px',
				height: Math.round(scaleY*$('#avatar').height() ) + 'px',
				marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
				marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
			});
		}
		function preview(img, selection) {
			adjust('#img_small_preview', selection);
			adjust('#img_big_preview', selection);
		}
		$('img#avatar').imgAreaSelect({
			aspectRatio: "4:4",
			x1: 60,
			y1:60,
			x2: 200,
			y2: 200,
			onSelectEnd:function(img, selection) {
				$('#id_top').val(selection.y1);
				$('#id_left').val(selection.x1);
				$('#id_right').val(selection.x2);
				$('#id_bottom').val(selection.y2);
			},
			onSelectChange: preview
		});
	}); 



	var value = 0;
	function avatarrotateleft(){
		value -=90;
		$('#avatar').rotate({ animateTo:value});
		$('#avatar1').rotate({ animateTo:value});
		$('#avatar2').rotate({ animateTo:value});
	}
	function avatarrotateright(){
		value +=90;
		$('#avatar').rotate({ animateTo:value});
		$('#avatar1').rotate({ animateTo:value});
		$('#avatar2').rotate({ animateTo:value});
	}
	function select_avatar(){
		$('#avatar_id').click();
	}
	function uploadavatar(){
		$('#avatar_form').submit();
	}
	function submit_avatar(){
		$('#rotation').val(value);
		alert('修改成功');
		$('#crop_form').submit();
	}