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; }
以上所述就是本文的全部内容了,希望大家能够喜欢。