jquery - fengyuanchen/jquery-cropper 避免创建新的crop-box

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