Picture Cut Croppic Plugin

The first few days to do picture upload need to do the image cutting and zooming, internet search found the plug-in. The style is nice and the function is OK. But the web is the example of PHP background processing pictures, and then had to slowly pondering the processing of C #. Plugin address is: http://www.croppic.net/;

First download the good plug-in, put into the program file. Create a new page, introduce the Croppic.js,croppic.min.js,croppic.css file, and don't forget to introduce the jquery file, I'm using the 1.8.2 version. Before the introduction of the 1.8.2 version, but the use of the downloaded demo in the https://code.jquery.com/ Jquery-1.10.2.min.js This version, do not know is not 1.10.2 version of the issue, click the Upload button did not respond, open F12 always prompt I can not find the $, that is, no jquery error, After the introduction of the Jquery-1.8.2.min.js file is sure to be used.

First, the page

Page code There is nothing to say, the demo has, but still paste the part of JavaScript.

1<script src="Https://code.jquery.com/jquery-1.10.2.min.js"></script>2<script>3         varCroppicheaderoptions = {4Uploadurl:"ashx/upload.ashx",5 Cropdata: {6                 "Dummydata":1,7                 "DummyData2":"Asdas"8             },9Cropurl:"ashx/cropper.ashx",TenCustomuploadbuttonid:"Cropcontainerheaderbutton", OneModelfalse, ALoaderhtml:'<div class= "loader bubblingg" ><span id= "bubblingg_1" ></span><span id= "BubblingG_2" > </span><span id= "Bubblingg_3" ></span></div>' -         } -         varCroppic =NewCroppic ("Croppic", croppicheaderoptions); the  -         varCropcontainermodaloptions = { -Uploadurl:"ashx/upload.ashx", -Cropurl:"ashx/cropper.ashx", +Modeltrue, -Imgeyecandyopacity:0.4, +Loaderhtml:'<div class= "loader bubblingg" ><span id= "bubblingg_1" ></span><span id= "BubblingG_2" > </span><span id= "Bubblingg_3" ></span></div>' A         } at         varCropcontainermodal =NewCroppic ("Cropcontainermodal", cropcontainermodaloptions); -</script>

This uploadurl and cropurl corresponding to the ashx file is I handle uploading pictures and cut pictures of the background program, the other parts copied in the demo.

Second, upload pictures

uploading pictures of the processing program online is also a lot of, but in this plugin to note: According to official documents, the processing of the return of the JSON code is fixed, such as the success of processing to return 4 parameters, namely Status,url,width and height Instead, it only needs to return two parameters, status and message, if it fails. I used javascriptserializer in the background to serialize the JSON, without having to bother writing JSON statements. The following code snippet is the JSON that the system should return when the image is uploaded successfully, and of course the failure is similar, here is not 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)); }

Third, the picture cut

Before I cut the picture, I zoomed in on the picture. At first I also cut the image according to the original size, the size of the cut in the page file is fixed, that is, the size of the picture frame. But I found that once the larger picture is uploaded, the Croppic plugin will set the image to its default size when it is displayed, and then the image can be manipulated according to the zoom-in button, but when the picture is cut, the cut image is not the picture we see because the actual picture is not scaled. And just pretend to zoom in when it's displayed. Fortunately, when the plug-in is cut, IMGW and IMGH parameters are passed, telling the developer that the image is now scaled to a long-width property, scaled based on this long-width property, we can also scale our original image to capture the picture.

            Context.            Response.ContentType = "Text/plain"; String Imgurl = context.            request["Imgurl"]; int IMGINITW = Int. Parse (context. request["IMGINITW"]. ToString ());//the original width int imginith = Int. Parse (context. request["Imginith"]. ToString ());//The image is long//scaled after the picture has a length of width int IMGW = Int. Parse (context. request["IMGW"].            ToString ()); Double HH = convert.todouble (context. request["IMGH"].            ToString ());//may occur when zooming in decimal int imgh = (int) HH; int imgY1 = Int. Parse (context. request["ImgY1"]. ToString ());//Cut point start coordinate y int imgX1 = Int. Parse (context. request["ImgX1"]. ToString ());//Cut point start coordinate x int cropw = Int. Parse (context. request["CROPW"]. ToString ());//shear 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));

The Imghelp.makethumnail () method is to scale the original image, which I use to scale by width here, because the Croppic plug-in is also scaled by width, so it's always good with him. The Imghelp.getpart () method is to intercept the image. When writing these methods, be aware that when you have finished or scaled to save the image must be the specific path of the hard disk, such as D://IMG, because this error I stuck a long time ago. Of course, the plug-in also specifies the parameter status and URL that will be returned after the image is successfully captured, where the URL cannot be the hard disk address, and the relative address is used, as this is used to display to the page.

Iv. Summary

Once the plugin is mastered, it is not difficult. Only in the current version of the study, there will be 3 images: original, thumbnail, post-capture pictures. In-depth study can be considered after the original image, thumbnails deleted, leaving only the captured pictures, so the server burden will not be so large. The next step to try is whether it can be used in mobile phones, especially in the browser, many do not support plug-ins. I have previously written to the browser in the image upload or use the input file this HTML native control, Rao, or some phones do not support internal upload. As for the Uploadify plugin is not available.

Picture Cut Croppic Plugin