Js plug-in Jcrop custom screenshot function, jsjcrop custom screenshot

Js plug-in Jcrop custom screenshot function, jsjcrop custom screenshot

When talking about this demand, I found some information online, but it basically does not meet the requirements of the project. Referring to some projects and the transformation of colleagues, we finally look like a bit.

The image size is roughly three pixels, and each pixel is used in different places. consider that there are not many images, which are compressed and saved separately.

Based on the captured pixel position, compress the image to the corresponding image:

 

Download the Jcrop. js and uploadify. js Image Upload plug-ins and plug-ins.

Comm_UploadJcrop.js

// Crop the Avatar object and the aspect ratio var jcrop_api, boundx, boundy; // upload the image // Id: Upload Control Id // IsShowProgress: whether to display progress bars // SuccessFunc: function UploadImg (Id, IsShowProgress, SuccessFunc, IsJcrop) {var uploadObj =$ ("#" + Id ); var htmlstr = "<div class = 'upload _ ShowFileProgress 'id ='" + Id + "-queue '" + (IsShowProgress? "": "Style = 'display: none; '") + "> </div>"; uploadObj. parent (). append (htmlstr); var img_UploadUrl = IsJcrop? "/Upload/UploadifyHeader": "/Upload/UploadifyImg"; // Upload controller's method uploadObj. uploadify ({// specify the swf file 'swf ':'/Scripts/uploadify/uploadify.swf ', // download uploadifyplug in uploadify.swf // The page 'upload' processed in the background: img_UploadUrl, // progress bar id 'queueid': Id + "-queue", // whether the 'removecompleted': false automatically disappears after the progress bar is displayed, // 'buttonclass' related to the button ': 'btn _ upload', 'buttontext': 'select the image', 'height': '31', 'width': '123 ', // text displayed in the file type drop-down menu at the bottom of the browser window This 'filetypedesc': 'image files', // The file suffix 'filetypeexists ':'*. gif ;*. jpg ;*. png ;*. bmp ;*. jpeg ;*. svg ', // select a file and then automatically upload 'auto': true, // if it is set to true, Multifile upload will be allowed to 'multi': false, 'onuploadsuccess': function (file, data, response) {if (SuccessFunc! = Undefined & SuccessFunc! = Null & SuccessFunc. length> 0) {eval (SuccessFunc + "(file, data, response)") ;}}) ;}// Upload file // Id: upload Control Id // IsShowProgress: whether to display progress bar // SuccessFunc: function UploadFile (Id, IsShowProgress, SuccessFunc) {var uploadObj = $ ("#" + Id ); var htmlstr = "<div class = 'upload _ ShowFileProgress 'id ='" + Id + "-queue '" + (IsShowProgress? "": "Style = 'display: none; '") + "> </div>"; uploadObj. parent (). append (htmlstr); uploadObj. uploadify ({// specify the swf file 'swf ':'/Scripts/uploadify/uploadify.swf ', // the page for background processing 'upload':'/Upload/Uploadify ', // progress bar id 'queueid': Id + "-queue", // whether the 'removecompleted': false automatically disappears after the progress bar is displayed, // 'buttonclass' related to the button ': 'btn _ upload', 'buttontext': 'select A file', 'height': '31', 'width': '2013 ', // The default object type is 'all files ':'*. * ', // The text displayed in the file type drop-down menu at the bottom of the browser window // 'filetypedesc': 'image files', // The suffix of the file that can be uploaded 'filetypeexts ': '*. * ', // select a file and then automatically upload 'auto': false. // if it is set to true, Multifile upload is allowed to 'multi': true, 'onuploadsuccess': function (file, data, response) {if (SuccessFunc! = Undefined & SuccessFunc! = Null & SuccessFunc. length> 0) {eval (SuccessFunc + "(file, data, response)") ;}}}// sets the image function SetJcropImage (url) {$ (". div_NoFileTip "). hide (); $ (". uploadImgContainer "). show (); $ ("# preview_large "). attr ("src", url); $ ("# preview_large2 "). attr ("src", url); $ ("# preview_large3 "). attr ("src", url); $ ("# imgsrc "). val (url); ErealizeJcrop (url);} // cut the image function ErealizeJcrop (url) {var $ pcnt = $ ('# previ Ew_large2 '). parent (), xsize = $ pcnt. width (), ysize = $ pcnt. height (); $ ('# preview_large '). jcrop ({onChange: updatePreview, onSelect: updatePreview, onSelect: updateCoords, aspectRatio: xsize/ysize}, function () {var bounds = this. getBounds (); boundx = bounds [0]; boundy = bounds [1]; jcrop_api = this; // $ preview. appendTo (jcrop_api.ui.holder) ;}); // reload the image if (jcrop_api! = Undefined) jcrop_api.setImage (url); function updateCoords (c) {$ ('# x '). val (c. x); $ ('# y '). val (c. y); $ ('# W '). val (c. w); $ ('# H '). val (c. h) ;}; function updatePreview (c) {if (parseInt (c. w)> 0) {var rx = xsize/c. w; var ry = ysize/c. h; $ ("# preview_large2" ).css ({width: Math. round (rx * boundx) + 'px ', height: Math. round (ry * boundy) + 'px ', marginLeft:'-'+ Math. round (rx * c. x) + 'px ', marginTop:'-'+ Math. round (ry * c. y) + 'px '}); $ pcnt = $ (' # preview_large3 '). parent (), xsize2 = $ pcnt. height (); ysize2 = $ pcnt. height (); var rx2 = xsize2/c. w; var ry2 = ysize2/c. h; $ ("# preview_large3" ).css ({width: Math. round (rx2 * boundx) + 'px ', height: Math. round (ry2 * boundy) + 'px ', marginLeft:'-'+ Math. round (rx2 * c. x) + 'px ', marginTop:'-'+ Math. round (ry2 * c. y) + 'px '});}};

Background code:

# Region: Check whether a folder exists. if the folder does not exist, create the folder. Return the folder path private void CheckFileExistsCreateNew (string filepath) {if (! Directory. exists (Server. mapPath (filepath) {Directory. createDirectory (Server. mapPath (filepath); // create a folder} # endregion # region upload an image // upload an avatar [HttpPost] public JsonResult UploadifyHeader (HttpPostedFileBase fileData) {if (fileData! = Null) {try {// File Upload Path string fileName = Path. getFileName (fileData. fileName); // the name of the original file string fileExtension = Path. getExtension (fileName); // file extension string saveName = DateTime. now. toString ("yyyyMMddHHmmssffff") + "_ Y" + fileExtension; // save the file name string Url = "/Upload/" + CurrentUserInfo. sys_RentCompany.CompanyKey + "/" + CurrentUserInfo. comm_User.Id + "/UploadImg"; // create an Upload folder in the project to store the uploaded and intercepted image C UrrentUserInfo. sys_sharecompany.companykey is the value saved by the session. Here, the path of the corresponding folder can define string ShowUrl = Url + "/" + saveName; string filePhysicalPath = Server. mapPath (ShowUrl); // CheckFileExistsCreateNew (Url); fileData. saveAs (filePhysicalPath); // compress the image string YsFileImg = ImgHandler. ysImg (ShowUrl, filePhysicalPath); return Json (YsFileImg);} catch (Exception ex) {return Json (new {Success = false, Mes Sage = ex. Message}, JsonRequestBehavior. AllowGet) ;}} else {return Json (new {Success = false, Message = "select the file to upload! "}, JsonRequestBehavior. AllowGet) ;}// upload an avatar [HttpPost] public JsonResult UploadifyImg (HttpPostedFileBase fileData) {if (fileData! = Null) {try {// File Upload Path string fileName = Path. getFileName (fileData. fileName); // the name of the original file string fileExtension = Path. getExtension (fileName); // file extension string saveName = DateTime. now. toString ("yyyyMMddHHmmssffff") + "_ Y" + fileExtension; // save the file name // string filed = "/Upload/" + saveName; // path through string Url = "/Upload/" + CurrentUserInfo. sys_RentCompany.CompanyKey + "/" + CurrentUserInfo. comm_User.Id + "/UploadImg"; string ShowUrl = Url + "/" + saveName; string filePhysicalPath = Server. mapPath (ShowUrl); // CheckFileExistsCreateNew (Url); fileData. saveAs (filePhysicalPath); return Json (ShowUrl);} catch (Exception ex) {return Json (new {Success = false, Message = ex. message}, JsonRequestBehavior. allowGet) ;}} else {return Json (new {Success = false, Message = "select the file to upload! "}, JsonRequestBehavior. allowGet) ;}}// Save the cut image [HttpPost] public JsonResult JcropImg (FormCollection colls) {JsonFormatResult result = new JsonFormatResult {IsSuccess = true, Message = "saved successfully! "}; Try {int x = int. parse (colls ["x"]); int y = int. parse (colls ["y"]); int w = int. parse (colls ["w"]); int h = int. parse (colls ["h"]); string imgsrc = colls ["imgsrc"]; string Path = ImgHandler. cutAvatar (imgsrc, x, y, w, h); result. data = Path;} catch (Exception e) {result. isSuccess = false; result. message = e. message;} return Json (result);} # endregion

The copied code is certainly flawed and can be changed to a suitable project as needed.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.