JQuery Jcrop plugin for Image Selection

In general, the principle is very simple. The general process is: load the source image on the browser --> use a rectangular box to select a region on the source image and send the selected vertex coordinates and rectangular size to the server --> use the image cutting algorithm on the server side to cut the source image and output the cut image. Next we will discuss and analyze these steps in detail, and attach a demo at the end for your reference.

1. Load the source image on the page

I don't need to talk about this. I just need to display an image on the page and use an img tag. But I need to paste the code for the next demonstration.


2. Use a rectangular box to select an area on the source Image

We will use a jQuery plug-in Jcrop. Thanks to Jcrop. The project page address is http://deepliquid.com/content/jcrop.html. thank you again. The next step is to use this plug-in to enable us to cut images on the source image at will. First, place several hidden fields on the page to store the currently selected vertex coordinates and the size of the selected rectangle, and then put a Save button, click Save to save the cut image on the server. The Code is as follows:
Copy codeThe Code is as follows:
<Form id = "AvatarForm" action = "">
<Input id = "x" name = "x" type = "hidden">
<Input id = "y" name = "y" type = "hidden">
<Input id = "w" name = "w" type = "hidden">
<Input id = "h" name = "h" type = "hidden">
<Input class = "input_btn" id = "BtnSaveAvatar" value = "confirm to save" type = "submit">
</Form>

The four hidden fields represent the x: x coordinate of the top left vertex, y: y coordinate of the top left vertex, w: select the width of the rectangle, and h: select the length of the rectangle.
Then we call the plug-in to perform initialization and introduce js and css files:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/Jcrop/js/jquery. Jcrop. js"> </script>
<Link rel = "stylesheet" href = "js/Jcrop/css/jquery.Jcrop.css" type = "text/css">

Initialize the js Code of the source image:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# Testimage'). Jcrop ({
OnChange: updateCoords,
OnSelect: updateCoords
});
$ ("# BtnSaveAvatar"). click (function (){
$. Ajax ({
Url: 'handler. ashx ',
Data: {'X': $ ("# x "). val (), 'y': $ ("# y "). val (), 'w': $ ("# w "). val (), 'H': $ ("# h "). val ()},
Datatype: "text/json ",
Type: 'post ',
Success: function (o) {window. location. href = "result. aspx? Url = "+ o;} // jump to the result page to view the cut image
});
Return false;
});
});
Function updateCoords (c ){
$ ('# X'). val (c. x );
$ ('# Y'). val (c. y );
$ ('# W'). val (c. w );
$ ('# H'). val (c. h );
};

After the above steps, we are very happy to see a beautiful girl appear in front of us, and let us select any part. It is very exciting. Because the demo is at the end, cut one here first.

3. Cut the image on the server side and output the cut image:
The main class code for image cutting is as follows:
Copy codeThe Code is as follows:
Public class ImageCut
{
/// <Summary>
/// Crop -- use GDI +
/// </Summary>
/// <Param name = "B"> original Bitmap </param>
/// <Param name = "StartX"> Start coordinate X </param>
/// <Param name = "StartY"> Start coordinate Y </param>
/// <Param name = "iWidth"> width </param>
/// <Param name = "iHeight"> height </param>
/// <Returns> the cropped Bitmap </returns>
Public Bitmap KiCut (Bitmap B)
{
If (B = null)
{
Return null;
}

Int w = B. Width;
Int h = B. Height;

If (X> = w | Y> = h)
{
Return null;
}

If (X + Width> w)
{
Width = w-X;
}

If (Y + Height> h)
{
Height = h-Y;
}

Try
{
Bitmap bmpOut = new Bitmap (Width, Height, PixelFormat. Format24bppRgb );

Graphics g = Graphics. FromImage (bmpOut );
G. DrawImage (B, new Rectangle (0, 0, Width, Height), new Rectangle (X, Y, Width, Height), GraphicsUnit. Pixel );
G. Dispose ();

Return bmpOut;
}
Catch
{
Return null;
}
}

Public int X = 0;
Public int Y = 0;
Public int Width = 120;
Public int Height = 120;
Public ImageCut (int x, int y, int width, int heigth)
{
X = x;
Y = y;
Width = width;
Height = heigth;
}
}

In Handler. ashx, receive the vertex coordinates and the length and width of the cut image transmitted from the page, and call the C # image cutting class to achieve image cutting:
Copy codeThe Code is as follows:
Public void ProcessRequest (HttpContext context ){
String xstr = context. Request ["x"];
String ystr = context. Request ["y"];
String wstr = context. Request ["w"];
String hstr = context. Request ["h"];
String sourceFile = context. Server. MapPath ("girl.jpg ");
String savePath = "CutImage/" + Guid. NewGuid () + ". jpg ";
Int x = 0;
Int y = 0;
Int w = 1;
Int h = 1;
Try
{
X = int. Parse (xstr );
Y = int. Parse (ystr );
W = int. Parse (wstr );
H = int. Parse (hstr );
}
Catch {}

ImageCut ic = new ImageCut (x, y, w, h );
System. Drawing. Bitmap cuted = ic. KiCut (new System. Drawing. Bitmap (sourceFile ));
String cutPath = context. Server. MapPath (savePath );
Cuted. Save (cutPath, System. Drawing. Imaging. ImageFormat. Jpeg );
Context. Response. Write (savePath); // output the saved path to display the cut image in the receiving path on the page.
}

Finally, we receive the path of the cut image on the Result. aspx page and display the cut image:


Now, the entire process is complete. For better reference and learning, we will attach a small demo below to download the demo.

Finally, have you taken away the cloud I left behind? Please tell me that I am looking forward to your answer.