Bootstrap Modal 中的 Jcrop 裁剪错误的坐标答案

【问题标题】：Jcrop in Bootstrap Modal crops wrong coordinatesBootstrap Modal 中的 Jcrop 裁剪错误的坐标
【发布时间】：2014-05-18 20:09:04
【问题描述】：

我在我的 Jcrop 脚本中使用本教程中的代码：http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

只要我不将图像放入 Bootstrap 模态，它就可以很好地工作。之后图像被错误裁剪。

我尝试添加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
 }

但这没有帮助。如何让 jCrop 在 Bootstrap 模式下工作？

【问题讨论】：

我愚蠢的 hack 是创建引导 css 的副本并将其与我有 jcrop 的页面相关联。所以 jcrop 页面有它自己独立的 css 文件。然后我注释掉了引导 CSS 的底部，一切都开始工作了，而且在移动设备上看起来仍然不错。这是一种愚蠢的方法，但它对我有用..

标签： jquery twitter-bootstrap jcrop

【解决方案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>

【讨论】：