Croppic plug-in for image cropping and croppic plug-in for Cropping

Croppic plug-in for image cropping and croppic plug-in for Cropping

When uploading images a few days ago, you need to cut and scale the images. This plug-in is found during online search. The style is nice and the function is OK. However, php is used as an example to process images in the background on the Internet, so you have to figure out how to process images in C. Plug-in address is: http://www.croppic.net /;

First download the plug-in and put it into the program file. The newly created page is imported into the croppic.js, croppic.min.js, croppic.css file, and do not forget to introduce the jquery file. I use version 1.8.2. We didn't introduce version 1.8.2 before, but used the token in the downloaded demo.

I. Page

There is nothing to say about the Page code. There are all in the demo, but paste the javascript part.

 1  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 2     <script> 3         var croppicHeaderOptions = { 4             uploadUrl: "Ashx/Upload.ashx", 5             cropData: { 6                 "DummyData": 1, 7                 "DummyData2":"asdas" 8             }, 9             cropUrl:"Ashx/Cropper.ashx",10             customUploadButtonId: "cropContainerHeaderButton",11             model: false,12             loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '13         }14         var croppic = new Croppic("croppic", croppicHeaderOptions);15 16         var cropContainerModalOptions = {17             uploadUrl: "Ashx/Upload.ashx",18             cropUrl: "Ashx/Cropper.ashx",19             model: true,20             imgEyecandyOpacity: 0.4,21             loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '22         }23         var cropContainerModal = new Croppic("cropContainerModal", cropContainerModalOptions);24     </script>

In this example, the ashx files corresponding to uploadUrl and cropUrl are the background programs for processing and cutting images, and the other parts are in the demo.

Ii. upload images

The processing program for uploading images is also looking for a lot on the Internet, but in this plug-in, please note: according to the official documentation, the json code returned after processing is fixed, for example, if the processing is successful, four parameters, namely status, url, width, and height, must be returned. If the processing fails, only two parameters, namely status and message, must be returned. I used JavaScriptSerializer in the background for json serialization, so I don't have to bother writing json statements. The following code snippet is the json returned by the system when the image is uploaded successfully. Of course, this is also true when the image fails. Here we will not give an example:

{"status":"success","url":"path/img.jpg","width":originalImgWidth,"height":originalImgHeight}

My upload. ashx file:

Try {HttpPostedFile file = context. Request. Files ["img"]; string uploadPath = "/images/croppers/"; if (file! = Null) {var server = HttpContext. Current. Server; string destdir = server. MapPath (uploadPath); if (! System. IO. directory. exists (destdir) System. IO. directory. createDirectory (destdir); // If the folder does not exist, create it string fname = file. fileName; string _ file_ext = Path. getExtension (fname); string dataname = DateTime. now. toFileTime (). toString (); string filename = destdir + dataname + _ file_ext; // random name file. saveAs (filename); System. drawing. image image = System. drawing. image. fromFile (filename); MODEL. ajaxMsg m = new MODEL. ajaxMsg (); m. status = "success"; m. url = uploadPath + dataname + _ file_ext; m. width = image. width; m. height = image. height; JavaScriptSerializer js = new JavaScriptSerializer (); context. response. write (js. serialize (m);} else {MODEL. ajaxMsg m = new MODEL. ajaxMsg (); m. status = "error"; m. message = "file not found"; JavaScriptSerializer js = new JavaScriptSerializer (); context. response. write (js. serialize (m);} catch {MODEL. ajaxMsg m = new MODEL. ajaxMsg (); m. status = "error"; m. message = "server error"; JavaScriptSerializer js = new JavaScriptSerializer (); context. response. write (js. serialize (m ));}

Iii. Image Cutting

Before cropping an image, I scaled the image. At first, I cut the image according to the size of the source image. The cut size is determined in the page file, that is, the size of the image box. However, I found that when uploading a larger image, the croppic plug-in sets the image size to its default size when displaying the image. Then, you can perform operations on the Image Based on the zoom-in and zoom-out buttons, however, when an image is cut, the cut image is not what we see, because the actual image is not scaled, but the image is scaled as it is. Fortunately, the plug-in will pass imgW and imgH parameters during cropping, telling developers that the image's current length and width attribute is scaled based on this length and width attribute, we can also scale the source image to facilitate image capturing.

Context. response. contentType = "text/plain"; string imgurl = context. request ["imgUrl"]; int imgInitW = int. parse (context. request ["imgInitW"]. toString (); // source Image Width int imgInitH = int. parse (context. request ["imgInitH"]. toString (); // source image length // after scaling, the image length and width int imgW = int. parse (context. request ["imgW"]. toString (); double HH = Convert. toDouble (context. request ["imgH"]. toString (); // the decimal point int imgH = (int) HH; int may appear during scaling. ImgY1 = int. parse (context. request ["imgY1"]. toString (); // start coordinate of the cut point Y int imgX1 = int. parse (context. request ["imgX1"]. toString (); // start coordinate of the cut point X int cropW = int. parse (context. request ["cropW"]. toString (); // cut width int cropH = int. parse (context. request ["cropH"]. toString (); // cut length string cropPath = "/images/croppers/"; var server = HttpContext. current. server; string destdir = server. mapPath (cropPath); if (! System. IO. directory. exists (destdir) System. IO. directory. createDirectory (destdir); string name = imgurl. substring (imgurl. lastIndexOf ('/'); name = name. split ('/'). getValue (1 ). toString (); string filename = cropPath + "crops_Thumb _" + name; string imgurl_t = cropPath + "Thumb _" + name; App_Code.ImageHelp imgHelp = new App_Code.ImageHelp (); imgHelp. makeThumNail (imgurl, imgurl_t, imgW, imgH, "W"); imgHelp. getPart (imgurl_t, cropPath, 0, 0, cropW, cropH, imgX1, imgY1); MODEL. ajaxMsg m = new MODEL. ajaxMsg (); m. status = "success"; m. url = filename; JavaScriptSerializer js = new JavaScriptSerializer (); context. response. write (js. serialize (m ));

Here, the imgHelp. MakeThumNail () method is used to scale the source image. I am here to scale it by width, because the croppic plug-in is also scaled by width, so it is always better with him. The imgHelp. GetPart () method captures an image. When writing these methods, you must note that the specific path of the hard disk, such as D: // img, must be taken or scaled to save the image, I have been stuck for a long time because of this error. Of course, the plug-in also specifies the parameter status and url returned after the screenshot is successful. Here, the url cannot be the hard disk address, but the relative address must be used, because this is used to display the page.

Iv. Summary

Once the plug-in is mastered, it will not be difficult. In the previous version, three images are displayed: The Source image, thumbnail, and captured image. After in-depth research, you can consider deleting the source image and thumbnail, leaving only the captured image, which will not be so heavy on the server. In the next step, I would like to try to see if it can be used in mobile phones, especially in browsers. Many of them do not support plug-ins. I used html native controls such as input file to upload images in the browser. Rao is so, or some mobile phones do not support internal uploads. The uploadify plug-in is even more unavailable.