Php uses imgareaselect to crop images,

Php uses imgareaselect to crop images,

Reference CSS

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

Reference js

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

Html

<Div>  </div> <div id = "myPreview">  </div> <form name = "fmcdrop"> <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 =" OK "/> </form>

JQuery code

$ ("# Mainimg_src", content ). load (function () {crop ($ ("# mainimg", content) ;}); function crop ($ img) {// $ img Yes // scale down 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 );}});}

Confirm Cropping

// Determine cut $ ("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 ("operation successful"); $ ("# left_mainimg "). attr ("src", "/" + r. path + '? A = '+ (new Date ()). format ('yyyymmddhhmms'); $ ("# myPreview", content.html .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 ;});

Server-side php code

Public function actionCrop ($ src_path, $ x1, $ x2, $ y1, $ y2) {$ pic = $ src_path; $ width = $ x2-$ x1; $ height = $ y2-$ y1; $ type = exif_imagetype ($ pic); // determine the file type $ 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); // crop imagejpeg ($ copy, $ src_path); // Replace the new image return ['result' => 'success', 'path' => $ src_path]; // return the new image address} 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 ;}

The above is all the content of this article. I hope you will like it.