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