Image cropping and asynchronous upload Plugin-one-step (recording) and one-step asynchronous upload

Image cropping and asynchronous upload Plugin-one-step (recording) and one-step asynchronous upload

The Image Upload and cropping function can be seen everywhere. Some users write it by themselves, but it takes too much time. The plug-in may feel a lot. Some time ago, I wanted to pick a good plug-in and use it later, but I picked several plug-ins for use, and the results were very good. The problem was the merger. The effect of a single plug-in was very good. No problem, or people would not have to eat it, however, when I used these plug-ins together, various strange problems came out, and I finally ran one after another, finally, after a long period of time, I found a useful one, so I quickly recorded it. Otherwise, I would like to find it again later. It's a waste of time, so I recorded my experiences and put it all in one step, this is also a tree for white to take advantage of the cold.

Step 1: html code

<Script src = "~ /Scripts/jquery-1.10.2.min.js "> </script> <! -- Version 9.0 or later --> <script src = "~ /Js/jquery. form. js "> </script> <! -- One-Step upload and submission (upload) This plug-in is not cropped and belongs to another download. To facilitate asynchronous upload and submission --> <link href = "~ /Css/bootstrap.min.css "rel =" stylesheet "/> <link href = "~ /Css/cropper.css "rel =" stylesheet "/> <link href = "~ /Css/docs.css "rel =" stylesheet "/> <script src = "~ /Js/bootstrap. min. js "> </script> <script src = "~ /Js/cropper. js "> </script> <! -- Cropping and uploading http://fengyuanchen.github.io/cropper/ --> <Form action = "#" id = "form_upload" method = "post"> <label style = "width: 60px; height: 30px; "for =" inputImage "title =" open image "> <input class =" hide "id =" inputImage "name =" file "type =" file "accept =" image/ * "> browse... </label> <! -- Upload prompt --> <div class = "upload_tag"> </div> <div style = "margin-top: 10px;"> <div style = "width: 100px; height: 100px; "> </div> <br/> <div class = "preview-lg"> </div> <br/> <div> <input type = "submit" value = "Upload" class = "btn upload_point btn-primary" style = "width: 60px; height: 30px; "/> </div> </form>View Code

Step 2: docs. js Code

$ (Function () {var $ image = $ (". cropper "), $ dataX = $ (" # dataX "), $ dataY = $ (" # dataY "), $ dataHeight = $ (" # dataHeight "), $ dataWidth = $ ("# dataWidth"), // console = window. console | {log: $. noop}, cropper; $ image. cropper ({aspectRatio: 1, // Aspect Ratio string/number, default auto, 1 represents a square, 16/4 represents a rectangle autoCropArea: 0.3, // The number between 0 and 1. Defines the size (percentage) zoomLevel: 1, // scaling level // data: {// only four attributes are supported: "x", "y ", "width" and "height". By default, the cropping area appears in the center of the image. // X: 420, // y: 50, // width: 100, // height: 100 //}, preview :". preview ", // jQuery selector preview, add additional elements, preview area modal: true, // differentiate the cropping area and background dashed: true, // set autoCrop: true on the dotted line of the cropping area, // whether to automatically display dragCrop: true, // Delete the current cropping area, create a new dashed: true, modal: true, movable: true, // move the cropping area resizable: true, // adjust the cropping area zoomable: true, // enlarge the image rotatable: true, // rotate the image checkImageOrigin: true, // check the image source. If it is a cross-origin image, the crossorigin attribute will be added. Add image elements to "Rotate" and "getdataurl" // maxWidth: 100, // Cropping Area // maxHeight: 100, // minWidth: 100, // minHeight: 100, done: function (data) {// triggered when the region changes $ dataX. val (data. x); $ dataY. val (data. y); $ dataHeight. val (data. height); $ dataWidth. val (data. width) ;}, build: function (e) {// triggered before the cropping area is created}, built: function (e) {// triggered $ image after the cropping area is created. cropper ("zoom",-1) ;}, dragstart: function (e) {// triggered before moving the cropping area}, dragmove: function (e ){// Triggered when the cropping area is moved}, dragend: function (e) {// triggered when the cropping area is moved}); $ ("# zoomOut "). click (function () {$ image. cropper ("zoom",-1) ;}); var $ inputImage =$ ("# inputImage"); if (window. fileReader) {// select the image $ inputImage. change (function () {var fileReader = new FileReader (), files = this. files, file; if (! Files. length) {return;} file = files [0]; if (/^ image \/\ w + $ /. test (file. type) {fileReader. readAsDataURL (file); fileReader. onload = function () {$ image. cropper ("reset", true ). cropper ("replace", this.result).css ("width", "100px"); $ inputImage. val ("") ;};} else {showMessage ("select an image. ") ;}}) ;}else {$ inputImage. addClass ("hide") ;}}); // upload code $ (". upload_point "). click (function () {// alert ($ (". cropper "). cropper ("getDataURL"), type); return false; $ ("# form_upload "). ajaxSubmit ({url: "/Home/ProcessRequest", type: "post", dataType: "text", data: {"getDataURL": $ (". cropper "). cropper ("getDataURL", {width: 50, height: 50})}, // indicates submitting the base64 image character format to the background success: function (data) {$ (". upload_tag "2.16.text(data).css ({" color ":" green "," display ":" block "}) ;}, error: function () {$ (". upload_tag "). text ("Upload exception, Please refresh or log on again" ).css ({"color": "red", "display": "block "});}}); return false ;});View Code

Step 3: Background code

1 [HttpPost] 2 public string ProcessRequest (FormCollection f) 3 {4 try 5 {6 string byteStr = f ["getDataURL"]. toString (); // data: image/png; base64, 7 int delLength = byteStr. indexOf (',') + 1; 8 string str = byteStr. substring (delLength, byteStr. length-delLength); 9 Image returnImage = Base64StringToImage (str); 10 11 returnImage. save (Server. mapPath ("/images/head/") + Guid. newGuid () + ". jpg ", 12 13 System. drawing. imaging. imageFormat. jpeg); 14} 15 catch (Exception) 16 {17 return "Upload Failed"; 18} 19 return "Upload successful "; 20} 21 // Convert base64 encoded text to Image 22 private Image Base64StringToImage (string txt) 23 {24 byte [] arr = Convert. fromBase64String (txt); 25 MemoryStream MS = new MemoryStream (arr); 26 Bitmap bmp = new Bitmap (MS); 27 return bmp; 28}View Code