My jcrop code

$(function(){

// Create variables (in this scope) to hold the API and image size
var jcrop_api,
    boundx,
    boundy,

    // Grab some information about the preview pane
    $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),

    xsize = $pcnt.width(),
    ysize = $pcnt.height();

//console.log('init',[xsize,ysize]);
$('#target').Jcrop({
  onChange: updateInfo,
  onSelect: updateInfo,
  onRelease: clearInfo,
  setSelect: [0, 0, 150, 180],
  boxWidth: 400, boxHeight: 300,
  allowMove: true, 
  allowResize: true, 
  allowSelect: true,
  aspectRatio: xsize / ysize
},function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;

  // Move the preview into the jcrop container for css positioning
  $preview.appendTo(jcrop_api.ui.holder);
});


   // update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    if (parseInt(e.w) > 0) {
        var rx = xsize / e.w;
        var ry = ysize / e.h;

        $pimg.css({
            width : Math.round(rx * boundx) + 'px',
            height : Math.round(ry * boundy) + 'px',
            marginLeft : '-' + Math.round(rx * e.x) + 'px',
            marginTop : '-' + Math.round(ry * e.y) + 'px'
        });
    }
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('#w').val('');
    $('#h').val('');
};


   });

   Java controller which handles it

@RequestMapping(value = "/editProfileImage", method = RequestMethod.POST)
public @ResponseBody
FileMeta edit(MultipartHttpServletRequest request,
        @RequestParam(value = "x1") final int x1,
        @RequestParam(value = "y1") final int y1,
        @RequestParam(value = "w") final int w,
        @RequestParam(value = "h") final int h) throws Exception {
    Iterator<String> itr = fileIterator(request);
    MultipartFile mpf = null;
    final FileMeta fileMeta = new FileMeta();
    // 2. get each file
    while (itr.hasNext()) {
        mpf = getMultipartFile(request, itr);
        checkIfEmpty(mpf);
        checkifValidFormat(mpf);

        final BufferedImage subImage = getBufImage(mpf).getSubimage(x1, y1, w, h);

        //final BufferedImage resizedImage = resizeImage(subImage);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(subImage,
                mpf.getContentType().replace("image/", ""), baos);
        final Account account = accountManager.findBySigin((String) request
                .getAttribute("account"));
        profilePictureService.saveProfilePicture(account.getId(),
                baos.toByteArray());

        prepareMetaInformation(mpf, fileMeta, account, baos);
    }
    return fileMeta;
}

This code works fine for some images but dont work fine for most of the images. Does anybody has any clue.

For example for the following image It works perfect because i am getting the cropped image perfectly.

But for this image for example I am not getting the cropped image correctly.

My jcrop code

$(function(){

// Create variables (in this scope) to hold the API and image size
var jcrop_api,
    boundx,
    boundy,

    // Grab some information about the preview pane
    $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),

    xsize = $pcnt.width(),
    ysize = $pcnt.height();

//console.log('init',[xsize,ysize]);
$('#target').Jcrop({
  onChange: updateInfo,
  onSelect: updateInfo,
  onRelease: clearInfo,
  setSelect: [0, 0, 150, 180],
  boxWidth: 400, boxHeight: 300,
  allowMove: true, 
  allowResize: true, 
  allowSelect: true,
  aspectRatio: xsize / ysize
},function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;

  // Move the preview into the jcrop container for css positioning
  $preview.appendTo(jcrop_api.ui.holder);
});


   // update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    if (parseInt(e.w) > 0) {
        var rx = xsize / e.w;
        var ry = ysize / e.h;

        $pimg.css({
            width : Math.round(rx * boundx) + 'px',
            height : Math.round(ry * boundy) + 'px',
            marginLeft : '-' + Math.round(rx * e.x) + 'px',
            marginTop : '-' + Math.round(ry * e.y) + 'px'
        });
    }
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('#w').val('');
    $('#h').val('');
};


   });

   Java controller which handles it

@RequestMapping(value = "/editProfileImage", method = RequestMethod.POST)
public @ResponseBody
FileMeta edit(MultipartHttpServletRequest request,
        @RequestParam(value = "x1") final int x1,
        @RequestParam(value = "y1") final int y1,
        @RequestParam(value = "w") final int w,
        @RequestParam(value = "h") final int h) throws Exception {
    Iterator<String> itr = fileIterator(request);
    MultipartFile mpf = null;
    final FileMeta fileMeta = new FileMeta();
    // 2. get each file
    while (itr.hasNext()) {
        mpf = getMultipartFile(request, itr);
        checkIfEmpty(mpf);
        checkifValidFormat(mpf);

        final BufferedImage subImage = getBufImage(mpf).getSubimage(x1, y1, w, h);

        //final BufferedImage resizedImage = resizeImage(subImage);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(subImage,
                mpf.getContentType().replace("image/", ""), baos);
        final Account account = accountManager.findBySigin((String) request
                .getAttribute("account"));
        profilePictureService.saveProfilePicture(account.getId(),
                baos.toByteArray());

        prepareMetaInformation(mpf, fileMeta, account, baos);
    }
    return fileMeta;
}

This code works fine for some images but dont work fine for most of the images. Does anybody has any clue.

For example for the following image It works perfect because i am getting the cropped image perfectly.

But for this image for example I am not getting the cropped image correctly.

• javascript
• java
• graphics
• bufferedimage
• jcrop

• I was removing the tag "java" before I really saw that java was included in the question. I am sorry. I have added "java" again, but I could not make it the first tag in the list. – Anders Lindén Commented Dec 7, 2015 at 15:13

2 Answers 2

I have used below code and its works for me..Please go through below one.

Your Problem is Here:

setSelect: [0, 0, 150, 180],

which you are passing constant

jQuery(function ($) {

        // Create variables (in this scope) to hold the API and image size
        var jcrop_api,
            boundx,
            boundy,

            // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),

            xsize = $pcnt.width(),
            ysize = $pcnt.height();

        console.log('init', [xsize, ysize]);
        $('#target').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            onSelect: storeCoords,
            aspectRatio: xsize / ysize,
            boxWidth: 350, boxHeight: 350
        }, function () {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;

            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;

                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
            // storeCoords(c);
        };
        function storeCoords(c) {

            jQuery('#X').val(c.x);
            jQuery('#Y').val(c.y);
            jQuery('#W').val(c.w);
            jQuery('#H').val(c.h);


        };

    });

Please separate out this function from your code.

     function storeCoords(c) {

        jQuery('#X').val(c.x);
        jQuery('#Y').val(c.y);
        jQuery('#W').val(c.w);
        jQuery('#H').val(c.h);


    };

And place call storeCoords at your fixed coordinates you set earlier as

setSelect:storeCoords ,

Without having console logs showing errors that could potentially identify the problem, you'll have to settle for an inconsistency that I found. ID tags are supposed to be used strictly for only one element. I see that you are using an ID tag, presumably for multiple images. This does not meet HTML 5 pliancy because IDs are meant for one object alone, and classes are meant for multiple objects. You should switch to a class and iterate through the objects that have this class assigned to it. For example:

$(".cropimages").each(function(index) {
  $(this).Jcrop({
    onChange: updateInfo,
    onSelect: updateInfo,
    onRelease: clearInfo,
    setSelect: [0, 0, 150, 180],
    boxWidth: 400, boxHeight: 300,
    allowMove: true, 
    allowResize: true, 
    allowSelect: true,
    aspectRatio: xsize / ysize
  }, function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable
    jcrop_api = this;

    // Move the preview into the jcrop container for css positioning
    $preview.appendTo(jcrop_api.ui.holder);
  });
});

With that code, be sure that all of your images use the class cropimages. This should iterate through each, then crop them. Also, make sure that you have all of the required libraries, and check the console for errors.