fengyuanchen/jquery-cropper Избегайте создания новой кроп-коробки

Question

Я использую библиотеку jquery-cropper для обрезки изображений. Ниже приведен мой текущий код.

HTML:

<div id="headShotImage" class="tl">
    <img id="image2" src="/Images/im.jpg">
</div>

Javascript:

        var $image2 = $('#image2');

        $image2.cropper({
            autoCropArea: 0.5,
            strict: true,
            guides: false,
            highlight: false,
            dragCrop: true,
            cropBoxMovable: true,
            cropBoxResizable: false,
            mouseWheelZoom: true,
            minContainerWidth: 360,
            minContainerHeight: 270,
            minCropBoxWidth: 200,
            minCropBoxHeight: 200,
            minCanvasWidth: 360,
            minCanvasHeight: 270,
            touchDragZoom: true,
            crop: function (event) {
                console.log(event.detail.x);
                console.log(event.detail.y);
                console.log(event.detail.width);
                console.log(event.detail.height);
                console.log(event.detail.rotate);
                console.log(event.detail.scaleX);
                console.log(event.detail.scaleY);
            },
            ready: function () {

            }
        });

CSS:

    #headShotImage .cropper-crop-box {
        border-radius: 50%;
    }

    #headShotImage .cropper-view-box {
        border-radius: 50%;
    }

    #headShotImage .cropper-view-box {
        box-shadow: 0 0 0 1px #39f;
        outline: 0;
    }

Это работает нормально, как показано ниже.

проблема

Пользователь может изменить размер области обрезки, щелкнув где-нибудь на изображении и перетащив (см. Изображение ниже). Как я могу помешать пользователю создать новую область обрезки?

Примечание. Пользователь должен иметь возможность перемещать поле обрезки.

Answer 1

Вы можете использовать следующие параметры....

dragMode: 'move',
toggleDragModeOnDblclick: false