Jcrop in Bootstrap Modal crops wrong coordinates

Question

I'm using the code from this tutorial from my Jcrop script: http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

It works well as long as I don't put the image into Bootstrap modal. After that the image gets cropped wrong.

I tried to add boxWidth and 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
 }

but it didn't help. How can I make the jCrop work in Bootstrap modal?

Spanker

My stupid hack was to create a copy of the bootstrap css and associate it with the page where I have jcrop. So the jcrop page has it's own separate css file. Then I commented out the bottom part of the bootstrap CSS and everything started to work and still looks good in mobile. It's a stupid way to do this but it worked for me.. – Fullfaced

Answer 1

This is my solution work when the image resized to inside of div or 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>

Zephyr