Jcrop không cắt xén đúng những hình ảnh

Question

Mã của tôi jcrop

$(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; 
} 

Mã này hoạt động tốt đối với một số hình ảnh nhưng không làm việc tốt cho hầu hết các hình ảnh. Có ai có bất kỳ đầu mối nào không.

Ví dụ cho hình ảnh sau Nó hoạt động hoàn hảo vì tôi đang nhận được hình ảnh được cắt hoàn hảo.

Nhưng đối với hình ảnh này, ví dụ: Tôi không nhận được hình ảnh được cắt chính xác.

Answer 1

Tôi đã sử dụng mã bên dưới và các công trình của nó cho tôi..Vui lòng đi qua bên dưới một.

Vấn đề của bạn là ở đây:

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

mà bạn đang đi qua liên tục

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


     }; 

    }); 

Hãy tách ra chức năng này từ mã của bạn.

 function storeCoords(c) { 

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


    }; 

Và nơi gọi storeCoords ở cố định của bạn phối bạn thiết lập trước đó như

setSelect:storeCoords , 

Answer 2

Nếu không có nhật ký bảng điều khiển hiển thị lỗi có khả năng xác định sự cố, bạn sẽ phải giải quyết sự không nhất quán mà tôi đã tìm thấy. Thẻ ID được cho là chỉ được sử dụng đúng cho một phần tử. Tôi thấy rằng bạn đang sử dụng thẻ ID, có lẽ là cho nhiều hình ảnh. Điều này không đáp ứng HTML 5 compliancy vì ID có nghĩa là cho một đối tượng một mình, và các lớp học có nghĩa là cho nhiều đối tượng. Bạn nên chuyển sang một lớp và lặp qua các đối tượng có lớp này được gán cho nó. Ví dụ:

$(".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); 
    }); 
}); 

Với mã đó, hãy đảm bảo rằng tất cả hình ảnh của bạn sử dụng lớp cropimages. Điều này sẽ lặp qua từng bước, sau đó cắt chúng. Ngoài ra, hãy chắc chắn rằng bạn có tất cả các thư viện cần thiết và kiểm tra lỗi giao diện điều khiển.