首页 / 脚本样式 / JavaScript / php结合imgareaselect实现图片裁剪

/js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 

/js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js

<div><img src="blank.jpg" id="mainimg"></div><div id="myPreview" ><img src="blank.jpg" id="mainimgthumb" /></div><form name="fmCrop"><input type="hidden" name="src_path" value="" /><input type="hidden" name="x1" value="" /><input type="hidden" name="x2" value="" /><input type="hidden" name="y1" value="" /><input type="hidden" name="y2" value="" /><input type="submit" name="btnSubmit" class="baseinf_but1" style="display:none" value="确定" /></form>

$（"#mainimg_src", content）.load（function （） {crop（$（"#mainimg", content））; }）; function crop（$img） { //$img是 //缩小比例 var scalex =$img.width（） / $（"#mainimg_src"）.width（）; var scaley =$img.height（） / $（"#mainimg_src"）.height（）; $img.imgAreaSelect（{ x1:0,y1:0,x2:150,y2:150, handles: true, aspectRatio: "1:1", onSelectEnd: function （img, selection） { var scaleX = 100 / （selection.width || 1）; var scaleY = 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 （） {var data = $（"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=" + （new Date（））.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;}}）;return false;}）;

public function actionCrop（$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 "this type of image does not support！ only support jpg , gif or png";exit（）;}switch（$type） {case IMAGETYPE_JPEG :$image = imagecreatefromjpeg（$pic）;break;case IMAGETYPE_PNG :$image = imagecreatefrompng（$pic）;break;case IMAGETYPE_GIF :$image = imagecreatefromgif（$pic）;break;default:echo "Load image error！";exit（）;}$copy = $this->PIPHP_ImageCrop（$image, $x1, $y1, $width, $height）;//裁剪imagejpeg（$copy, $src_path）; //替换新图return ["result"=>"Success","path"=>$src_path]; //返回新图地址}function PIPHP_ImageCrop（$image, $x, $y, $w, $h）{$tw = imagesx（$image）; $th = imagesy（$image）; if （$x > $tw || $y > $th || $w > $tw || $h > $th） return FALSE; $temp = imagecreatetruecolor（$w, $h）; imagecopyresampled（$temp, $image, 0, 0, $x, $y, $w, $h, $w, $h）; return $temp; }