php截取图片并保存,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后台代码如下：

$action = $_GET['act'];

if($action=='delimg'){

$filename = $_POST['imagename'];

if(!empty($filename)){

unlink('upload/face/'.$filename);

echo '1';

}else{

echo '删除失败.';

}

}else{

$picname = $_FILES['mypic']['name'];

$picsize = $_FILES['mypic']['size'];

if ($picname != "") {

if ($picsize > 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);

}

?>

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

//删除会员以前的头像

if(file_exists($MemberFace)) {

unlink($MemberFace);

}

$MemberFace = sliceBanner("cuteboy");

echo $MemberFace;

exit;

}

function sliceBanner($UserName){

$x = (int)$_POST['x'];

$y = (int)$_POST['y'];

$w = (int)$_POST['w'];

$h = (int)$_POST['h'];

$pic = $_POST['src'];

//剪切后小图片的名字

$str = explode(".",$pic);//图片的格式

$type = $str[1]; //图片的格式

$filename = $UserName."_".date("YmdHis").".". $type; //重新生成图片的名字

$uploadBanner = $pic;

$sliceBanner = "upload/face/".$filename;//剪切后的图片存放的位置

//创建图片

$src_pic = getImageHander($uploadBanner);

$dst_pic = imagecreatetruecolor($w, $h);

imagecopyresampled($dst_pic,$src_pic,0,0,$x,$y,$w,$h,$w,$h);

imagejpeg($dst_pic, $sliceBanner);

imagedestroy($src_pic);

imagedestroy($dst_pic);

//删除已上传未裁切的图片

if(file_exists($uploadBanner)) {

unlink($uploadBanner);

}

//返回新图片的位置

return $sliceBanner;

}

//初始化图片

function getImageHander ($url) {

$size=@getimagesize($url);

switch($size['mime']){

case 'image/jpeg': $im = imagecreatefromjpeg($url);break;

case 'image/gif' : $im = imagecreatefromgif($url);break;

case 'image/png' : $im = imagecreatefrompng($url);break;

default: $im=false;break;

}

return $im;

}

?>

打包下载