JQueryjcrop plugin screenshot usage _ jquery

The project requires an avatar screenshot function, similar to the QQ Avatar screenshot function. I searched on the Internet and finally used the jQuery plug-in jcrop to intercept the image in the background for image cutting.
Principle of avatar capturing: Use jcrop at the front end to obtain the X axis coordinates, Y axis coordinates, the plane height, and the plane width of the plane surface, and then pass the four values to the back end
. Zoom in on the background: scale in the face area N times, N = the source image/front-end portrait. That is, X = X * Original Image Width/front image width, Y = Y * Original Image Height/Front
Figure height, W = W * Source image width/front image width, H = H * source Image Height/Front Image Height.
Instance:
JSP:

The Code is as follows:

Style: fixed height and width are required for large image and small image display, because the background must be enlarged. That is:
Then use jcrop. Before using jcrop, We need to download jcrop: http://deepliquid.com/content/jcrop.html.
After the downloaded package is decompressed, You can see three files with an index.html file./css stores the Jcorp style file, and the link referenced in the/demodownloaded file is placed in this folder ), /js is the most important script file in Jcorp. We only need to use three files: jquery.Jcrop.css, jquery. Jcrop. js, and JQuery. js.
Usage:

The Code is as follows:

// Crop the image
Function cutImage (){
$ ("# SrcImg"). Jcrop ({
AspectRatio: 1,
OnChange: showCoords,
OnSelect: showCoords,
MinSize: [200,200]
});
// A simple event handler that responds to onChange and onSelect events and calls them according to the preceding Jcrop
Function showCoords (obj ){
$ ("# X"). val (obj. x );
$ ("# Y"). val (obj. y );
$ ("# W"). val (obj. w );
$ ("# H"). val (obj. h );
If (parseInt (obj. w)> 0 ){
// Calculate the zoom ratio of the preview area image. The ratio of the display area width (to height) to the cropped width (to height) is obtained.
Var rx = $ ("# preview_box"). width ()/obj. w;
Var ry = $ ("# preview_box"). height ()/obj. h;
// Adjust the image style and display by proportional value
$ ("# PreviewImg" 2.16.css ({
Width: Math. round (rx * $ ("# srcImg"). width () + "px", // The width of the preview image is the product of the calculated ratio and the original image width.
Height: Math. round (rx * $ ("# srcImg"). height () + "px", // The preview Image height is the product of the calculated ratio value and the original image height.
MarginLeft: "-" + Math. round (rx * obj. x) + "px ",
MarginTop: "-" + Math. round (ry * obj. y) + "px"
});
}
}
}

Before using jcrop, you must first pre-Initialize $ (""). jcrop (); otherwise, it will not work.
There is also a way to call,

The Code is as follows:

Var api = $. Jcrop ('# cropbox ',{
OnChange: showPreview,
OnSelect: showPreview,
AspectRatio: 1
});

This method assigns the object generated by Jcrop to a global variable, which makes the operation easier.
Through the above js, the four values of X axis, Y axis, height H, and width W are passed to the background.
Zoom in and then cut.

Action

The Code is as follows:

/**
* Crop the Avatar
*/
Public String cutImage (){
/*
* Get Parameters
* X, y, w, h, bigImage
*/
HttpServletRequest request = (HttpServletRequest) ActionContext. getContext (). get (ServletActionContext. HTTP_REQUEST );
Int x = Integer. valueOf (request. getParameter ("x "));
Int y = Integer. valueOf (request. getParameter ("y "));
Int w = Integer. valueOf (request. getParameter ("w "));
Int h = Integer. valueOf (request. getParameter ("h "));
String bigImage = request. getParameter ("bigImage ");

// Obtain the actual file path
// Get the file name
String [] imageNameS = bigImage. split ("/");
String imageName = imageNameS [imageNameS. length-1];
// File official path
String imagePath = getSavePath () + "\" + imageName;

// Cut the image
ImageCut imageCut = new ImageCut ();
ImageCut. cutImage (imagePath, x, y, w, h );

// Save the image path to the user after cropping the Avatar
UserBean userBean = (UserBean) request. getSession (). getAttribute ("userBean ");
UserBean. setUserPhoto (bigImage );
// Save the Avatar
UserCenterService centerService = new UserCenterService ();
CenterService. updatePhoto (userBean );
// Save the modified user to the session
Request. getSession (). setAttribute ("userBean", userBean );

Return "updatePhoto ";
}
}

Image cropping tool: ImageCut. java

The Code is as follows:

Public class ImageCut {

/**
* Image Cutting
* @ Param imagePath source image address
* @ Param x coordinate of the target slice x axis start point
* @ Param y the start point of the target slice coordinate y axis
* @ Param w target slice width
* @ Param h target slice height
*/
Public void cutImage (String imagePath, int x, int y, int w, int h ){
Try {
Image img;
ImageFilter cropFilter;
// Read the source Image
BufferedImage bi = ImageIO. read (new File (imagePath ));
Int srcWidth = bi. getWidth (); // source Image Width
Int srcHeight = bi. getHeight (); // source Image Height

// If the source image size is greater than the slice size, the image is cut.
If (srcWidth> = w & srcHeight> = h ){
Image image = bi. getScaledInstance (srcWidth, srcHeight, Image. SCALE_DEFAULT );

Int x1 = x * srcWidth/400;
Int y1 = y * srcHeight/270;
Int w1 = w * srcWidth/400;
Int h1 = h * srcHeight/270;

CropFilter = new CropImageFilter (x1, y1, w1, h1 );
Img = Toolkit. getdefatooltoolkit (). createImage (new FilteredImageSource (image. getSource (), cropFilter ));
BufferedImage tag = new BufferedImage (w1, h1, BufferedImage. TYPE_INT_RGB );
Graphics g = tag. getGraphics ();
G. drawImage (img, 0, 0, null); // draw the reduced graph.
G. dispose ();
// Output as a file
ImageIO. write (tag, "JPEG", new File (imagePath ));
}
} Catch (IOException e ){
E. printStackTrace ();
}
}
}