Jcrop nie przycinanie prawidłowo obrazom

Question

mojego kodu 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; 
} 

ten kod działa dobrze dla niektórych zdjęć, ale nie działa dobrze dla większości obrazów. Czy ktokolwiek ma jakąkolwiek wskazówkę.

Na przykład dla następującego obrazu: Działa idealnie, ponieważ doskonale dostaję przycięty obraz.

Ale dla tego obrazu na przykład Nie otrzymuję prawidłowo przyciętego obrazu.

Answer 1

Użyłem poniżej kodu i jego utworów dla mnie .. Proszę przejść poniżej jednego.

Twój problem jest tutaj:

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

które przechodzą stały

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


     }; 

    }); 

Należy wydzielić z tej funkcji z kodu.

 function storeCoords(c) { 

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


    }; 

I miejsce połączenia storeCoords na swoją stałą współrzędne ustawić wcześniej jak

setSelect:storeCoords , 

Answer 2

Bez protokołów konsoli pokazujących błędy, które mogą potencjalnie zidentyfikować problem, musisz rozstrzygnąć zaistniejącą niespójność. Znaczniki ID powinny być używane wyłącznie dla jednego elementu. Widzę, że używasz tagu ID, prawdopodobnie w przypadku wielu obrazów. Nie spełnia to wymagań HTML 5, ponieważ identyfikatory są przeznaczone tylko dla jednego obiektu, a klasy są przeznaczone dla wielu obiektów. Powinieneś przełączyć się na klasę i iterować przez obiekty, do których przypisano tę klasę. Na przykład:

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

z tym kodem, mieć pewność, że wszystkie obrazy użyć klasy cropimages. Powinno to przebiegać przez każdą z nich, a następnie przycinać je. Upewnij się również, że masz wszystkie wymagane biblioteki i sprawdź konsolę pod kątem błędów.