使用 jcrop 和 java 裁剪图像

Posted 2023-02-25

【中文标题】使用 jcrop 和 java 裁剪图像

【英文标题】：Cropping image using jcrop and java

【发布时间】：2011-11-01 05:56:11

【问题描述】：

我正在尝试使用带有 Java Stuff 的 JQuery Jcrop 插件来裁剪图像，但我无法获得正确的结果。

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";
    

我可以裁剪照片，但结果不正确。例如看下面的图片：

【问题讨论】：

确定发布的变量是正确的吗？你还没有调整图像容器的大小？

是的，谢谢你的回复。我用粘贴的代码解决了。

【参考方案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

【参考方案2】：

是的，我遇到了问题。我需要调整图像大小。所以，我已经使用以下代码完成了：

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;
    

现在我可以得到裁剪后的图像了。