Jcrop does not crop images correctly

Question

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(ew) > 0) { var rx = xsize / ew; var ry = ysize / eh; $pimg.css({ width : Math.round(rx * boundx) + 'px', height : Math.round(ry * boundy) + 'px', marginLeft : '-' + Math.round(rx * ex) + 'px', marginTop : '-' + Math.round(ry * ey) + 'px' }); } $('#x1').val(ex); $('#y1').val(ey); $('#w').val(ew); $('#h').val(eh); }; // 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 great for some images, but it doesn't work great for most images. Does anyone have a key.

For example, for the following image It works great because I get a cropped image.

But for this image, for example, I do not get the cropped image correctly.

Answer 1

I used below code and its work for me. Please go below one.

Your problem is here:

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

with whom you go 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(cw) > 0) { var rx = xsize / cw; var ry = ysize / ch; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * cx) + 'px', marginTop: '-' + Math.round(ry * cy) + 'px' }); } // storeCoords(c); }; function storeCoords(c) { jQuery('#X').val(cx); jQuery('#Y').val(cy); jQuery('#W').val(cw); jQuery('#H').val(ch); }; }); 

Separate this function from your code.

  function storeCoords(c) { jQuery('#X').val(cx); jQuery('#Y').val(cy); jQuery('#W').val(cw); jQuery('#H').val(ch); }; 

And put the call repository at your fixed coordinates set earlier a

 setSelect:storeCoords , 

Answer 2

Without console logs showing errors that could potentially identify the problem, you would have to accept the mismatch I found. Identity tags should be used strictly for one element. I see that you are using an identification tag, presumably for multiple images. This does not meet the requirements of HTML 5 because identifiers are intended for only one object, and classes are intended for several objects. You must switch to the class and iterate over the objects to which this class is assigned. 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); }); }); 

Using this code, make sure all your images use the cropimages class. This should go through each and then crop them. In addition, make sure that you have all the necessary libraries and check the console for errors.