2013-07-29 5 views
7

मेरे jcrop कोड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; 
} 

इस कोड को कुछ छवियों के लिए ठीक काम करता है फसल लेकिन छवियों के अधिकांश के लिए ठीक से काम न नहीं। क्या किसी के पास कोई सुराग है।

उदाहरण के लिए निम्नलिखित छवि enter image description here यह सही काम करता है क्योंकि मुझे पूरी तरह से फसल की छवि मिल रही है।

लेकिन इस छवि के लिए उदाहरण के लिए enter image description here मुझे फसल की गई छवि ठीक से नहीं मिल रही है।

+0

मैं टैग "जावा" को हटाने गया था इससे पहले कि मैं वास्तव में देखा कि जावा प्रश्न में शामिल किया गया था समन्वय करता है। मुझे क्षमा करें। मैंने फिर से "जावा" जोड़ा है, लेकिन मैं इसे सूची में पहला टैग नहीं बना सका। –

उत्तर

4

मैंने नीचे कोड और उसके कार्यों के लिए उपयोग किया है .. कृपया नीचे एक से गुज़रें।

आपका समस्या यहाँ है:

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 , 
1

कंसोल लॉग के बिना त्रुटियों को दिखाए जो संभावित रूप से समस्या की पहचान कर सकते हैं, आपको एक असंगतता के लिए बसना होगा। आईडी टैग का उपयोग केवल एक तत्व के लिए सख्ती से किया जाना चाहिए। मैं देखता हूं कि आप एक आईडी टैग का उपयोग कर रहे हैं, संभवतः कई छवियों के लिए। यह एचटीएमएल 5 की शिकायत को पूरा नहीं करता है क्योंकि आईडी अकेले एक ऑब्जेक्ट के लिए हैं, और कक्षाएं कई ऑब्जेक्ट्स के लिए हैं। आपको कक्षाओं में स्विच करना चाहिए और उन वस्तुओं के माध्यम से पुनरावृत्ति करना चाहिए जिनके पास इस वर्ग को असाइन किया गया है। उदाहरण के लिए:

$(".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 का उपयोग हो सकता है। यह प्रत्येक के माध्यम से पुनरावृत्त करना चाहिए, फिर उन्हें फसल। साथ ही, सुनिश्चित करें कि आपके पास सभी आवश्यक पुस्तकालय हैं, और त्रुटियों के लिए कंसोल की जांच करें।

संबंधित मुद्दे