Jcrop trong Bootstrap Modal Cây sai phối

Question

Tôi đang sử dụng mã từ hướng dẫn này từ kịch bản Jcrop tôi: http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

Nó hoạt động tốt miễn là tôi không đưa hình ảnh vào Bootstrap phương thức. Sau đó hình ảnh bị cắt sai.

Tôi cố gắng thêm boxWidth và 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 
} 

nhưng nó đã không giúp đỡ. Làm thế nào tôi có thể làm cho jCrop làm việc trong phương thức Bootstrap?

Answer 1

Đây là giải pháp của tôi hoạt động khi hình ảnh được thay đổi kích thước bên trong div hoặc phương thức;

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