Question

我使用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模式下工作？

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>

引导模态中的Jcrop会产生错误的坐标

1 个答案: