Jcrop Zuschneiden nicht richtig die Bilder

Question

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

Dieser Code für einige Bilder funktioniert gut, aber nicht für die meisten Bilder funktionieren. Hat jemand eine Ahnung?

Zum Beispiel für das folgende Bild Es funktioniert perfekt, weil ich das zugeschnittene Bild perfekt bekomme.

Aber für dieses Bild zum Beispiel Ich bekomme das zugeschnittene Bild nicht richtig.

Answer 1

Ich habe unten Code verwendet und es funktioniert für mich..Bitte gehen Sie unter einem.

Ihr Problem ist hier:

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

, die diese Funktion konstant

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


     }; 

    }); 

Bitte trennen Sie sich von Ihrem Code sind vorbei.

 function storeCoords(c) { 

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


    }; 

und Ort Anruf storeCoords an Ihren festen Koordinaten Sie setzen früher als

setSelect:storeCoords , 

Answer 2

Ohne Konsolenprotokolle, die Fehler anzeigen, die das Problem möglicherweise identifizieren können, müssen Sie sich mit einer gefundenen Inkonsistenz begnügen. ID-Tags sollen nur für ein Element verwendet werden. Ich sehe, dass Sie ein ID-Tag verwenden, vermutlich für mehrere Bilder. Dies entspricht nicht der HTML-5-Kompatibilität, da IDs nur für ein Objekt und Klassen für mehrere Objekte bestimmt sind. Sie sollten zu einer Klasse wechseln und die Objekte durchlaufen, denen diese Klasse zugewiesen wurde. Zum Beispiel:

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

Mit diesem Code, stellen Sie sicher, dass alle Ihre Bilder, die Klasse cropimages verwenden. Dies sollte jedes durchlaufen und dann zuschneiden. Stellen Sie außerdem sicher, dass Sie über alle erforderlichen Bibliotheken verfügen, und überprüfen Sie die Konsole auf Fehler.