JQuery jcrop plugin screenshot usage

Do the cutting in the background.
Principle of head interception: in the foreground, use jcrop to obtain the X-axis coordinate, Y-axis coordinate, cutting height and cutting width of the cut surface, and then pass these four values to each other
Taiwan. Zoom in the background: zoom in the section by N times, N= the original image/the head shown in the foreground. So X is equal to X times the width of the original/the width of the front, and Y is equal to Y times the height of the original/the front
Figure height, W = W* original width/front width,H = H* original height/front height.
Example:
The JSP:

<div id="cutImage" style="display: none;">
 <div class="bigImg" style="float: left;">
     <img id="srcImg" src="" width="400px" height="270px"/>
 </div>
 <div id="preview_box" class="previewImg">
     <img id="previewImg" src="" width="120px"/>
 </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 picture, small picture display need fixed height, width, because the background needs to be enlarged. I.e., < Img width = "" height =" "/ >
And then we use jcrop. We need to download before using jcrop jcrop:http://deepliquid.com/content/Jcrop.html.
After unzipping the downloaded zip, you can see three folders and an index.html file. Jcorp style file is placed under/CSS, a few simple examples are placed under /demo (the link referenced in index.html is placed under this folder), and the most important script file in Jcorp is placed under /js. We only need to use three files: jquery.jcrop. CSS, jquery.jcrop. Js, jquery.js
Usage:

//Cut out the image
function cutImage(){
    $("#srcImg").Jcrop( {
     aspectRatio : 1,
     onChange : showCoords,
     onSelect : showCoords,
     minSize :[200,200]
 });
 //Simple event handler, response from the onChange,onSelect event, as 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) {
  //The scale of the preview area image is calculated by calculating the ratio of the width (and height) of the display area to the width (and height) of the clipping
  var rx = $("#preview_box").width() / obj.w;
  var ry = $("#preview_box").height() / obj.h;
  //The style and display of pictures are controlled by the scale value
  $("#previewImg").css( {
      width : Math.round(rx * $("#srcImg").width()) + "px", //The width of the preview image is the product of the calculated proportional value and the width of the original image
      height : Math.round(rx * $("#srcImg").height()) + "px", //The height of the preview image is the product of the calculated proportional value and the height of the original image
      marginLeft : "-" + Math.round(rx * obj.x) + "px",
      marginTop : "-" + Math.round(ry * obj.y) + "px"
  });
     }
 }
}

$(" "). Jcrop (); Do pre-initialization, otherwise it will not work.
  There's another way to call it,

     

    var api = $.Jcrop('#cropbox',{
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1
    });
    

This is done by assigning the Jcrop generated object to a global variable, which makes it easier to manipulate.
Through the above js, will be the X-axis coordinate, Y-axis coordinate, height H, width W this four values to the background, the background only need to according to these four values
Zoom in and cut.

  The Action

    public String cutImage(){
 
 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");   

 //Gets the true path to the file
 //Get file name
 String[] imageNameS = bigImage.split("/");
 String imageName = imageNameS[imageNameS.length-1];
 //Official file path
 String imagePath = getSavePath()+"\"+imageName;

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

 //After the avatar is cropped, save the image path to the user
 UserBean userBean = (UserBean) request.getSession().getAttribute("userBean");
 userBean.setUserPhoto(bigImage);
 //Save the picture
 UserCenterService centerService = new UserCenterService();
 centerService.updatePhoto(userBean);
 //Save the modified user to session
 request.getSession().setAttribute("userBean", userBean);

 return "updatePhoto";
    }
}

Crop image tool class: imagecut.java

public class ImageCut {

    
    public void cutImage(String imagePath, int x ,int y ,int w,int h){
 try {
     Image img;
     ImageFilter cropFilter;
     //Read source image
     BufferedImage bi = ImageIO.read(new File(imagePath));
     int srcWidth = bi.getWidth();      //Source map width
     int srcHeight = bi.getHeight();    //Source map height

     //If the original size is larger than the slice size, then the cutting is carried out
     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 reduced graph
  g.dispose();
  //Output as a file
  ImageIO.write(tag, "JPEG", new File(imagePath));
     }
 } catch (IOException e) {
     e.printStackTrace();
 }
    }
}

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/20131120162528.jpg? 20131020162546 ">