Jcrop in Bootstrap Modal falschen Kulturen koordinieren

Question

ich den Code aus diesem Tutorial von meinem Jcrop Skript: http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

Es funktioniert gut, solange ich das Bild in Bootstrap modal nicht setzen. Danach wird das Bild falsch abgeschnitten.

Ich versuchte boxWidth und boxHeight hinzuzufügen:

$('#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 
} 

aber es hat nicht geholfen. Wie kann ich das jCrop im Bootstrap-Modus arbeiten lassen?

Answer 1

Dies ist meine Lösung arbeiten, wenn das Bild in div oder modal in der Größe geändert wird;

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