In the background to do picture cutting.
The principle of Avatar interception: use Jcrop in the foreground to get the x-axis, y-axis, slice height, slice width of the slice, and then pass the four values
Console In the background to be enlarged processing: The plane will be enlarged N times, n= original/front display of the head. i.e. X = x* Wide chart/front width, Y = y* original image Height/front
Fig height, W = w* original Wide chart/front figure width, H = h* Image Height/front figure height.
Instance:
Jsp:
Copy Code code as follows:
<div id= "Cutimage" style= "Display:none;" >
<div class= "bigimg" style= "float:left;" >
</div>
<div id= "Preview_box" class= "previewimg" >
</div>
<div >
<form action= "" method= "Post" id= "Crop_form" >
<input type= "hidden" id= "Bigimage" name= "Bigimage"/>
<input type= "hidden" id= "x" name= "x"/>
<input type= "hidden" id= "y" name= "y"/>
<input type= "hidden" id= "W" name= "W"/>
<input type= "hidden" id= "H" name= "H"/>
<p><input type= "button" value= "Confirm" id= "Crop_submit"/></p>
</form>
</div>
</div>
Style: Large and small show all need to fixed height, width, because the background needs to be enlarged processing. namely:
Then the Jcrop is used. We need to download jcrop:http://deepliquid.com/content/jcrop.html before using Jcrop.
After the download of the compressed package can be seen three folders and a index.html file,/CSS placed under the JCorp style file,/demo placed under a few simple examples (index.html referenced in the link is placed in this folder),/ JS placed is the most important script file in the JCorp. We only need to use three files: jquery. Jcrop.css, jquery. Jcrop.js, Jquery.js
How to use:
Copy Code code as follows:
Cropping an image
function Cutimage () {
$ ("#srcImg"). Jcrop ({
Aspectratio:1,
Onchange:showcoords,
Onselect:showcoords,
MinSize: [200,200]
});
Simple event handlers that respond to the Onchange,onselect event and follow the Jcrop call above
function Showcoords (obj) {
$ ("#x"). Val (obj.x);
$ ("#y"). Val (OBJ.Y);
$ ("#w"). Val (OBJ.W);
$ ("#h"). Val (obj.h);
if (parseint (OBJ.W) > 0) {
Calculates the scale of the preview area picture scaling, calculated by calculating the width (and height) of the display area and the width of the trim (compared to the height)
var rx = $ ("#preview_box"). Width ()/OBJ.W;
var ry = $ ("#preview_box"). Height ()/obj.h;
Controlling the style and display of pictures by proportional values
$ ("#previewImg"). CSS ({
Width:Math.round (RX * $ ("#srcImg"). Width () + "px",//Preview picture width is the product of calculating the proportional value to the original picture width
Height:Math.round (RX * $ ("#srcImg"). Height () + "px",///preview picture height is the product of calculating proportional values to the height of the original picture
MarginLeft: "-" + Math.Round (RX * obj.x) + "px",
MarginTop: "-" + math.round (ry * obj.y) + "px"
});
}
}
}
Before using Jcrop, you must first initialize the $ (""). Jcrop (), otherwise no effect.
There is also a method of calling,
Copy Code code as follows:
var API = $. Jcrop (' #cropbox ', {
Onchange:showpreview,
Onselect:showpreview,
Aspectratio:1
});
This approach is to assign a Jcrop-generated object to a global variable, which is easier to do.
Through the above JS, the x axis coordinates, y axis coordinates, height h, Width w This four values passed to the background, the background only need according to these four values
Zoom in and then cut.
Action
Copy Code code as follows:
/**
* Cutting Head
*/
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");
Get file True Path
Get file name
string[] Imagenames = Bigimage.split ("/");
String imagename = imagenames[imagenames.length-1];
File official path
String ImagePath = Getsavepath () + "\" +imagename;
Cutting pictures
Imagecut imagecut = new Imagecut ();
Imagecut.cutimage (ImagePath, X, Y, W, h);
After the avatar crop is finished, save the picture path to the user
UserBean UserBean = (UserBean) request.getsession (). getattribute ("UserBean");
Userbean.setuserphoto (Bigimage);
Save Avatar
Usercenterservice centerservice = new Usercenterservice ();
Centerservice.updatephoto (UserBean);
Save the modified user to session
Request.getsession (). setattribute ("UserBean", UserBean);
return "Updatephoto";
}
}
Crop picture Tool class: Imagecut.java
Copy Code code as follows:
public class Imagecut {
/**
* Picture Cutting
* @param ImagePath Original Address
* @param x target slice coordinate x-axis starting point
* @param y target slice coordinate y-axis starting point
* @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;
Reading source Images
BufferedImage bi = imageio.read (new File (ImagePath));
int srcwidth = Bi.getwidth (); Source Chart Width
int srcheight = Bi.getheight (); Source Diagram Height
Packages chart size Larger than slice size, 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.getdefaulttoolkit (). 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 a smaller figure
G.dispose ();
Output as File
Imageio.write (Tag, "JPEG", New File (ImagePath));
}
catch (IOException e) {
E.printstacktrace ();
}
}
}
