2011-11-01 96 views
3

我想使用JQuery Jcrop插件與Java Stuff裁剪圖像,但我無法獲得正確的結果。使用jcrop和java裁剪圖像

JSP代碼:

<script type="text/javascript"> 
$(function() { 
    $('#actualImage').Jcrop({ 
    setSelect: [0, 0, 268, 180], 
    addClass: 'custom', 
    bgColor: 'yellow', 
    bgOpacity: .8, 
    //sideHandles: true 
    allowResize: false, 
    allowSelect: false, 
    onSelect: storeCoords 
}); 
}); 

function storeCoords(c) { 

jQuery('#X1').val(c.x); 
jQuery('#Y1').val(c.y); 
jQuery('#X2').val(c.x2); 
jQuery('#Y2').val(c.y2); 
jQuery('#W').val(c.w); 
jQuery('#H').val(c.h); 
} 

function cropPicture(){ 
    $.ajax({ 
     url: "cropPhoto.htm", 
     type: "POST", 
     data :{ 
      x : $('input#X1').val(), 
      y : $('input#Y1').val(), 
      x2 : $('input#X2').val(), 
      y2 : $('input#Y2').val(), 
      w : $('input#W').val(), 
      h : $('input#H').val(), 
      imageName : $('input#imageName').val() 
     }, 
     success: function (data) { 
      window.location = 'photo.htm'; 
     } 
} 
</script> 

Java代碼:

@RequestMapping(value = "cropPhoto.htm", method = RequestMethod.POST) 
    public String cropPhoto(HttpServletRequest request,HttpServletResponse response, 
      HttpSession session) throws IOException{ 
     int x1=Integer.parseInt(request.getParameter("x")); 
     int y1=Integer.parseInt(request.getParameter("y")); 
     int x2=Integer.parseInt(request.getParameter("x2")); 
     int y2=Integer.parseInt(request.getParameter("y2")); 
     int w=Integer.parseInt(request.getParameter("w")); 
     int h=Integer.parseInt(request.getParameter("h")); 
     System.out.println(x1+" "+y1+" "+x2+" "+y2+" "+w+" "+" "+h); 

     String image = request.getParameter("imageName"); 
     System.out.println("imageName"+image); 

     String sourcePath = request.getRealPath("") + "/FreeTemp/"; 
     String serverPath = sourcePath + session.getAttribute("uploadFile"); 
     serverPath = serverPath.replace("\\", "/"); 
     System.out.println(serverPath); 

     BufferedImage bi = ImageIO.read(new File(serverPath)); 

     BufferedImage out = bi.getSubimage(x1, y1, w, h); 

     ImageIO.write(out,"jpg",new File(sourcePath + image)); 

     session.setAttribute("croppedImage", image); 

     PrintWriter writer = response.getWriter(); 
     response.setContentType("text/html"); 

     return "redirect:/savephoto.htm"; 
    } 

我能夠裁剪的照片,但結果是不正確的。例如看看下面的圖片:

Original Image with selection to crop
cropped image which is incorrect

請幫助我。

+1

確保發佈VAR的是正確的?你沒有調整圖像容器的大小? –

+0

是的謝謝你的答覆。我通過使用粘貼的代碼解決了它。 – Unknown

回答

0

是的,我得到了疑難問題需要調整image.So,我一直在使用下面的代碼完成:

public static BufferedImage resizeImage(BufferedImage originalImage, int type){ 
     BufferedImage resizedImage = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, type); 
     Graphics2D g = resizedImage.createGraphics(); 
     g.drawImage(originalImage, 0, 0, IMG_WIDTH, IMG_HEIGHT, null); 
     g.dispose(); 

     return resizedImage; 
    } 

現在我能夠得到裁剪後的圖像。

1

實際的問題是圖像裁剪:您沒有計算圖像的實際自然高度和自然寬度。你可以試試這個:

function showCoords(c) { 
    // get image natural height/width for server site crop image. 
    var imageheight = document.getElementById('cropbox').naturalHeight; 
    var imagewidth = document.getElementById('cropbox').naturalWidth; 
    var xper = (c.x * 100/jQuery('#cropbox').width()); 
    var yper = (c.y * 100/jQuery('#cropbox').height()); 
    var wPer = (c.w * 100/jQuery('#cropbox').width()); 
    var hper = (c.h * 100/jQuery('#cropbox').height()); 

    var actX = (xper * imagewidth/100); 
    var actY = (yper * imageheight/100); 
    var actW = (wPer * imagewidth/100); 
    var actH = (hper * imageheight/100); 
    jQuery('#x').val(parseInt(actX)); 
    jQuery('#y').val(parseInt(actY)); 
    jQuery('#w').val(parseInt(actW)); 
    jQuery('#h').val(parseInt(actH)); 

}; 

如果你想有一個完整的例子看this link