Php + jquery + Jcrop for downloading, intercepting, and saving images

Php + jquery + Jcrop implements the upload-intercept-Save Image function & nbsp; currently, many popular member modules on our website add the online intercept Image function when uploading portraits. after The Intercept, save the image, recently, many users have asked if this function is available. there is a website that only supports the front-end image capturing function. if it is saved, it is not implemented. for details, see how to achieve Image Capturing. & #43; jquery plug-in preview function (www.jq-school.com php + jquery + Jcrop upload-capture-Save Image function)

Currently, most of my websites use the online screenshot capture function when the member module uploads portraits. after the screenshots are captured, they are saved. recently, many users have asked if this function is available, there is only a front-end screenshot function on the website, as to save it is not realized, the specific can view the implementation of the image capture + preview function jquery plug-in (http://www.jq-school.com/Detail.aspx? Id = 45). now I want to use php + jquery + Jcrop to upload, intercept, and save images. you can package and download the articles later. For more information about PHP, see.

The front-end code is as follows:

$ (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 () {// select the file $ ("# myupload "). ajaxSubmit ({dataType: 'json', // the data format is json beforeSend: function () {// Start to upload showimg. empty (); // clear the displayed figure progress. show (); // display the progress bar var percentVal = '0% '; // The start progress is the 0% bar. width (percentVal); // The width of the schedule percent.html (percentVal); // The progress is 0% btn.html ("uploading... "); // upload button: uploading in progress}, uploadProgress: function (event, position, total, percentComplete) {var percentVal = percentComplete + '%'; // Get the progress bar. width (percentVal); // Upload progress width (percent.html (percentVal); // Display Upload progress percentage}, success: function (data) {// success // Complete (""+ Data. name +" ("+ data. size +" k)Delete "); // display the uploaded image var img =" upload/face/"+ data. pic; // determine the size of the uploaded image and then set the fixed width of the image's height and width if (data. width> 240 & data. height <24020.20.showimg.html ("");} else if (data. width <240 & data. height> 2401_1_showimg.html ("");} else if (data. width <240 & data. height <24020.20.showimg.html ("" %%%%else%showimg.html ("");} // The saved image value $ ("# src") is sent to the php page "). val (img); // js $ ('# cropbox') of the captured image '). jcrop ({aspectRatio: 1, onSelect: updateCoords, minSize: [240,240], m AxSize: [240,240], allowSelect: false, // you can select allowResize: false, // whether setSelect: [0, 0,240,240 rows must be smaller than btn.html ("upload image "); // upload button restore}, error: function (xhr) {// Upload failure btn.html ("Upload failed" cannot Upload bar.width('0'{files.html (xhr. responseText); // return failure information}); $ (". delimg "). live ('click', function () {var pic = $ (this ). attr ("rel"); $. post ("action. php? Act = delimg ", {imagename: picloud, function(msg1_if(msg1_1_1_11_files.html (" deleted successfully. "); showimg. empty (); // clear the image progress. hide (); // hide progress bar} 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 ;};

The php background code is as follows:

 1024000) {echo 'image size cannot exceed 1m'; exit;} $ type = strstr ($ picname, '.'); if ($ type! = ". Gif" & $ type! = ". Jpg") {echo 'the image format is incorrect! '; Exit ;}$ rand = rand (100,999); $ pics = date ("YmdHis "). $ rand. $ type; // upload path $ pic_path = "upload/face /". $ pics; move_uploaded_file ($ _ FILES ['mypic '] ['tmp _ name'], $ pic_path);} $ size = round ($ picsize/, 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);}?>
 

Package download