बूटस्ट्रैप में Jcrop मोडल गलत फसलों मेरी Jcrop स्क्रिप्ट से निर्देशांक

Question

मैं इस ट्यूटोरियल से कोड का उपयोग कर रहा: http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

यह अच्छी तरह से काम करता है जब तक मैं बूटस्ट्रैप मोडल में छवि डाल नहीं है। उसके बाद छवि गलत हो जाती है।

मैं boxWidth और boxHeight जोड़ने की कोशिश की:

$('#load_img').Jcrop({ 
     minSize: [32, 32], // min crop size 
     aspectRatio : 1, // keep aspect ratio 1:1 
     bgFade: true, // use fade effect 
     bgOpacity: .3, // fade opacity 
     boxWidth: 200, // added 
     boxHeight: 200, // added 
     onChange: showThumbnail, 
     onSelect: showThumbnail 
} 

लेकिन यह मदद नहीं की। मैं बूटस्ट्रैप मोडल में जेसीआरओपी कैसे काम कर सकता हूं?

Answer 1

यह मेरा समाधान काम है जब छवि div या modal के अंदर आकार बदलती है;

<script src="~/assets/global/plugins/jcrop/js/jquery.Jcrop.min.js"></script> 
<script type="text/javascript"> 

    var imageCropWidth = 0; 
    var imageCropHeight = 0; 
    var cropPointX = 0; 
    var cropPointY = 0; 
    var isOk = false; 

    $(document).ready(function() { 
     initCrop(); 
    }); 

    $("#hl-crop-image").on("click", function (e) { 
     e.preventDefault(); 
     cropImage(); 
    }); 

    function initCrop() { 
     $('#my-origin-image').Jcrop({ 
      onChange: setCoordsAndImgSize, 
      aspectRatio: 1, 
      bgOpacity: 0.25, 
      bgColor: 'black', 
      borderOpacity: 1, 
      handleOpacity: 1, 
      addClass: 'jcrop-normal' 
     }); 
    } 

    function setCoordsAndImgSize(e) { 

     imageCropWidth = e.w; 
     imageCropHeight = e.h; 

     cropPointX = e.x; 
     cropPointY = e.y; 

     if (e.w <= 10 || e.h <= 10) { 
      $("#hl-crop-image").removeClass("btn-success").addClass("btn-default"); 
      isOk = false; 
     } 
     else { 
      $("#hl-crop-image").removeClass("btn-default").addClass("btn-success"); 
      isOk = true; 
     } 
    } 

    function cropImage() { 

     if (imageCropWidth == 0 && imageCropHeight == 0) { 
      alert("Please, select an area."); 
      return; 
     } 

     var pic = $("#my-origin-image") 
     // need to remove these in of case img-element has set width and height 
     pic.removeAttr("width"); 
     pic.removeAttr("height"); 

     yukleniyor(); 

     var pW = $("#my-origin-image")[0].naturalWidth/$("#my-origin-image").width(); 
     var pH = $("#my-origin-image")[0].naturalHeight/$("#my-origin-image").height(); 

     pW = pW.toFixed(2); 
     pH = pH.toFixed(2); 

     if (isOk == true) { 
      $.ajax({ 
       url: '/Profile/CropImae', 
       type: 'POST', 
       data: { 
        imagePath: $("#my-origin-image").attr("src"), 
        cropPointX: (cropPointX * pW).toFixed(0), 
        cropPointY: (cropPointY * pH).toFixed(0), 
        imageCropWidth: (imageCropWidth * pW).toFixed(0), 
        imageCropHeight: (imageCropHeight * pH).toFixed(0) 
       }, 
       success: function (data) { 
        window.location = "/profile/info"; 
       }, 
       error: function (data) { 
        window.location = "/profile/info"; 
       }, 
       fail: function (data) { 
        window.location = "/profile/info"; 
       } 
      }); 
     } else { alert("Selected area is not enough!"); } 
    } 

</script>