<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片处理</title>
<link href="<{$__APP__}>css/common.css" rel="stylesheet" type="text/css">
<link href="<{$__APP__}>css/shop.css" rel="stylesheet" type="text/css">
<link href="<{$__PUBLIC__}>css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<link href="<{$__PUBLIC__}>css/uq_js.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="<{$__PUBLIC__}>js/jquery.dialog.js"></script>
<script type="text/javascript" src="<{$__PUBLIC__}>js/ajaxfileupload.js"></script>
<script type="text/javascript" src="<{$__PUBLIC__}>js/jquery.Jcrop.js"></script>
<style type="text/css"> 
.ajax_box_bar{ width:100%; float:left; }
.ajax_box{ width:750px; margin:0 auto; position:relative;} 
.up{ width:100%; padding:0 0 20px 0; margin:10px 0 0 10px; float:left; }
.up p{ padding:10px 0 10px 0px; color:#999999; }

.btm{ width:100%; padding:0 0 20px 10px;  }
.btm .showImg{ width:260px; height:260px;  border:1px solid #efefef; background:#f8f8f8; float:left;}
.btm .thumb{ width:300px; padding:30px 0 0 50px; float:left;}
.btm .thumb span{ padding:10px 0 0px 0;}
.btm .thumb .view{ width:150px; height:150px; overflow:hidden; padding:10px 0 0 0;}
</style>
</head>

<body> 
<div class="ajax_box_bar" style=" height:415px;">
	<div class="ajax_box"> 
	 	<div class="up">
			<p>新头像不允许涉及政治敏感与色情;<br> 
				图片格式必须为：bmp, jpeg, jpg, gif;不可大于2M
			</p>
			<div id="upload_button_crop"><span>选择图片</span><input type="file" name="imgFile" id="imgFile" size="30" /></div>
			<div id="upload_msg"></div>
		</div>
		<div class="btm">
			<div class="showImg">
				<div class="show_img_box"><img src="" id="Pcrop_url"/></div>
				<div id="sub_can">
					<label><!--X1--><input type="hidden" id="x1" name="x1" /></label>
					<label><!--Y1--><input type="hidden" id="y1" name="y1" /></label>
					<label><!--X2--><input type="hidden" id="x2" name="x2" /></label>
					<label><!--Y2--><input type="hidden" id="y2" name="y2" /></label>
					<label><!--W --><input type="hidden" id="w" name="w" /></label>
					<label><!--H --><input type="hidden" id="h" name="h" /></label>
				</div>
			</div>
			<div class="thumb">
				<span>图片预览：</span>
				<div class="view">
					<img src="<{$__PUBLIC__}>images/default_avatar.jpg" />
				</div>
			</div> 
		</div>  
	</div>
</div>
<div class="ajax_do_bar"> 
		<a href="javascript:;" class="ok" id="do_ok">确定</a><a class="cancel" id="do_cancel" href="javascript:;">取消</a> 
</div>

</body>
</html>
<script type="text/javascript"> 
$(function(){ 
	$(document).on('click',"#do_ok",function(){ 
		var x1 = $("#sub_can input[name=x1]").val();
		var y1 = $("#sub_can input[name=y1]").val();
		var x2 = $("#sub_can input[name=x2]").val(); 
		var y2 = $("#sub_can input[name=y2]").val();
		var w = $("#sub_can input[name=w]").val();
		var h = $("#sub_can input[name=h]").val();
		var img = $("#Pcrop_url").attr('src'); 
		$.post('?m=album&a=cut_img&path=<{$smarty.get.path}>',{img:img,x1:x1,x2:x2,y1:y1,y2:y2,w:w,h:h,path:'<{$smarty.get.path}>'},function(data){
			$('#back_img_url').attr('src',data);
			$('#back_img_url_input').val(data);
			remove_dialog();
		});  
	});
	$("#upload_button_crop").change(function(){ 
		ajaxFileUpload();
	}); 
	function ajaxFileUpload(){
    	$("#upload_msg").ajaxStart(function(){ 
      		$(this).show(); 
   		});  
		/*  .ajaxComplete(function(){  $(this).hide();  });  */  
		$.ajaxFileUpload({ 
		   	url:'?m=album&a=upload_temp', 
		   	secureuri:false, 
		   	fileElementId:'imgFile', 
		   	dataType: 'json',	//text json
		   	success: function(data){
				if(data.error == '0'){ 
					var jcrop_api, boundx, boundy;	 
					$(".show_img_box").html('<img id="Pcrop_url" src="'+data.url+'" />');
					$('.view').html('<img src="'+data.url+'"/>'); 
					$('#Pcrop_url').Jcrop({  
						boxWidth: 260,
						boxHeight: 260,
						//minSize: [50,50],
						//setSelect: [c.x,c.y,c.x2,c.y2],
						onChange: updatePreview,
						onSelect: updatePreview,
						onSelect: updateCoords,
						aspectRatio: 1  
					},function(){
						var bounds = this.getBounds(); 
						boundx = bounds[0];  
						boundy = bounds[1];
						jcrop_api = this;
					});
					function updateCoords(c){
						$('#x1').val(c.x);
						$('#y1').val(c.y);
						$('#w').val(c.w);
						$('#h').val(c.h);
					};
					function updatePreview(c){
						//$("#er").val(scalesx+' '+scalesy+' -- '+c.w+' | '+c.h);
						if (parseInt(c.w) > 0){
							$('.view img').css({  
								width: Math.round(150 / c.w * boundx) + 'px', 
								height: Math.round(150 / c.h * boundy) + 'px',  
								marginLeft: '-' + Math.round(150 / c.w * c.x) + 'px',  
								marginTop: '-' + Math.round(150 / c.h * c.y) + 'px'  
							}); 
						}  
					};  
				}else{ 
					$('#msg').html("<span style='color:red'>上传失败</span>"); 
				}
			}
		});
	}
	$("#do_cancel").click(function(){
		remove_dialog();
	}); 
});
function remove_dialog(){
	$("#uq_dialog_mask").remove();
	$("#uq_dialog_box").remove(); 
}
</script>