php+jquery+Jcrop实现下传-截取-保存图片功能

php+jquery+Jcrop实现下传-截取-保存图片功能

php+jquery+Jcrop实现上传-截取-保存图片功能

  现在很我网站都流行会员模块上传头像时添加在线截取图片功能，截取完之后再保存，最近也有很多网友问有没有这个功能啊，网站上有一款只实现前端截取图片功能的，至于保存的话就没实现，具体可以查看实现图片截取+预览功能的jquery插件（http://www.jq-school.com/Detail.aspx?id=45），现在分享用php+jquery+Jcrop实现上传-截取-保存图片功能的，文章后面可以打包下载，学习PHP的网友们可以参考哦。

 

前端代码如下：

$(document).ready(function(){
	var bar = $('.bar');
	var percent = $('.percent');
	var showimg = $('#showimg');
	var progress = $(".progress");
	var files = $(".files");
	var btn = $(".btn span");
	$("#fileupload").wrap("
");
	$("#fileupload").change(function(){  //选择文件
		$("#myupload").ajaxSubmit({
			dataType:  'json',	//数据格式为json 
			beforeSend: function() {	//开始上传 
				showimg.empty();	//清空显示的图片
				progress.show();	//显示进度条
				var percentVal = '0%';	//开始进度为0%
				bar.width(percentVal);	//进度条的宽度
				percent.html(percentVal);	//显示进度为0% 
				btn.html("上传中...");	//上传按钮显示上传中
			},
			uploadProgress: function(event, position, total, percentComplete) {
				var percentVal = percentComplete + '%';	//获得进度
				bar.width(percentVal);	//上传进度条宽度变宽
				percent.html(percentVal);	//显示上传进度百分比
			},
			success: function(data) {	//成功
				//获得后台返回的json数据，显示文件名，大小，以及删除按钮
				files.html(""+data.name+"("+data.size+"k) 删除");
				//显示上传后的图片
				var img = "upload/face/"+data.pic;
				//判断上传图片的大小 然后设置图片的高与宽的固定宽
				if (data.width>240 && data.height<240){
					showimg.html("");
				}else if(data.width<240 && data.height>240){
					showimg.html("");
				}else if(data.width<240 && data.height<240){
					showimg.html("");
				}else{
					showimg.html("");
				}
				//传给php页面，进行保存的图片值
				$("#src").val(img);
				//截取图片的js
				$('#cropbox').Jcrop({
					aspectRatio: 1,
					onSelect: updateCoords,
					minSize:[240,240],
					maxSize:[240,240],
					allowSelect:false, //允许选择
					allowResize:false, //是否允许调整大小
					setSelect: [ 0, 0, 240, 240 ]
				});
				btn.html("上传图片");	//上传按钮还原
			},
			error:function(xhr){	//上传失败
				btn.html("上传失败");
				bar.width('0')
				files.html(xhr.responseText);	//返回失败信息
			}
		});
	});
	
	$(".delimg").live('click',function(){
		var pic = $(this).attr("rel");
		$.post("action.php?act=delimg",{imagename:pic},function(msg){
			if(msg==1){
				files.html("删除成功.");
				showimg.empty();	//清空图片
				progress.hide();	//隐藏进度条 
			}else{
				alert(msg);
			}
		});
	});
	
});

function updateCoords(c){
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#w').val(c.w);
	$('#h').val(c.h);
};

function checkCoords(){
	if (parseInt($('#w').val())) return true;
	alert('Please select a crop region then press submit.');
	return false;
};

 

php后台代码如下：

 1024000) {
			echo '图片大小不能超过1M';
			exit;
		}
		$type = strstr($picname, '.');
		if ($type != ".gif" && $type != ".jpg") {
			echo '图片格式不对！';
			exit;
		}
		$rand = rand(100, 999);
		$pics = date("YmdHis") . $rand . $type;
		//上传路径
		$pic_path = "upload/face/". $pics;
		move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);
	}
	$size = round($picsize/1024,2);
	$image_size = getimagesize($pic_path);
	$arr = array(
		'name'=>$picname,
		'pic'=>$pics,
		'size'=>$size,
		'width'=>$image_size[0],
		'height'=>$image_size[1]
	);
	echo json_encode($arr);
}
?>

 

打包下载