php结合imgareaselect实现图片裁剪
引用CSS
/js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css
引用js
/js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js
html
<div> <imgsrc='blank.jpg'id="mainimg"> </div> <divid="myPreview"> <imgsrc="blank.jpg"id="mainimgthumb"/> </div> <formname="fmCrop"> <inputtype="hidden"name="src_path"value=""/> <inputtype="hidden"name="x1"value=""/> <inputtype="hidden"name="x2"value=""/> <inputtype="hidden"name="y1"value=""/> <inputtype="hidden"name="y2"value=""/> <inputtype="submit"name="btnSubmit"class="baseinf_but1"style="display:none"value="确定"/> </form>
jQuery代码
$("#mainimg_src",content).load(function(){
crop($("#mainimg",content));
});
functioncrop($img){//$img是
//缩小比例
varscalex=$img.width()/$("#mainimg_src").width();
varscaley=$img.height()/$("#mainimg_src").height();
$img.imgAreaSelect({
x1:0,y1:0,x2:150,y2:150,
handles:true,aspectRatio:'1:1',
onSelectEnd:function(img,selection){
varscaleX=100/(selection.width||1);
varscaleY=100/(selection.height||1);
$('#mainimgthumb').css({
width:Math.round(scaleX*400)+'px',
height:Math.round(scaleY*300)+'px',
marginLeft:'-'+Math.round(scaleX*selection.x1)+'px',
marginTop:'-'+Math.round(scaleY*selection.y1)+'px'
});
$('input[name="x1"]',content).val(selection.x1/scalex);
$('input[name="y1"]',content).val(selection.y1/scaley);
$('input[name="x2"]',content).val(selection.x2/scalex);
$('input[name="y2"]',content).val(selection.y2/scaley);
}
});
}
确定裁剪
//确定剪切
$("form[name=fmCrop]",content).submit(function(){
vardata=$("form[name=fmCrop]",content).serializeArray();
$.get('/members/web-members-rest/crop.html',data,function(r){
switch(r.result){
case"Success":
jAlert("操作成功");
$("#left_mainimg").attr("src","/"+r.path+'?a='+(newDate()).format('yyyyMMddhhmmss'));
$("#myPreview",content).css("display","block");
$("#myPreview",content).prev().css("display","none");
$("#mainimg",content).imgAreaSelect({hide:true});
$("form[name=fmUpload]",content).css("display","none");
$("input[name=btnSubmit]",content).css("display","none");
break;
}
});
returnfalse;
});
服务器端php代码
publicfunctionactionCrop($src_path,$x1,$x2,$y1,$y2){
$pic=$src_path;
$width=$x2-$x1;
$height=$y2-$y1;
$type=exif_imagetype($pic);//判断文件类型
$support_type=array(IMAGETYPE_JPEG,IMAGETYPE_PNG,IMAGETYPE_GIF);
if(!in_array($type,$support_type,true)){
echo"thistypeofimagedoesnotsupport!onlysupportjpg,giforpng";
exit();
}
switch($type){
caseIMAGETYPE_JPEG:
$image=imagecreatefromjpeg($pic);
break;
caseIMAGETYPE_PNG:
$image=imagecreatefrompng($pic);
break;
caseIMAGETYPE_GIF:
$image=imagecreatefromgif($pic);
break;
default:
echo"Loadimageerror!";
exit();
}
$copy=$this->PIPHP_ImageCrop($image,$x1,$y1,$width,$height);//裁剪
imagejpeg($copy,$src_path);//替换新图
return['result'=>'Success','path'=>$src_path];//返回新图地址
}
functionPIPHP_ImageCrop($image,$x,$y,$w,$h){
$tw=imagesx($image);
$th=imagesy($image);
if($x>$tw||$y>$th||$w>$tw||$h>$th)returnFALSE;
$temp=imagecreatetruecolor($w,$h);
imagecopyresampled($temp,$image,0,0,$x,$y,$w,$h,$w,$h);
return$temp;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。