Jcrop不正确裁剪图像

Question

我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; 
} 

此代码工作正常的一些图片，但不为大多数图像的正常工作。有人有任何线索吗？

例如对于下面的图像 它完美的作品，因为我得到完美的裁剪图像。

但是，对于此图像例如 我没有正确获取裁剪图像。

Answer 1

我已经使用下面的代码和它的作品为我..请通过下面的一个。

你的问题是在这里：

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

你逝去的不断

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


     }; 

    }); 

请从您的代码中分离出此功能。

 function storeCoords(c) { 

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


    }; 

和地点的呼叫storeCoords你的固定坐标设置较早 为

setSelect:storeCoords , 

Answer 2

没有控制台日志显示可能可能识别问题的错误，您必须解决我找到的不一致问题。 ID标签应该只用于一个元素。我看到你正在使用ID标签，可能是为了多张图片。这不符合HTML 5合规性，因为ID仅适用于一个对象，而类适用于多个对象。你应该切换到一个类并遍历有这个类分配给它的对象。例如：

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

与该代码，请确保您的所有图片使用类cropimages。这应该遍历每个，然后裁剪它们。另外，请确保您拥有所有必需的库，并检查控制台是否有错误。