fengyuanchen/jquery-cropper 避免创建新的裁剪框答案

【问题标题】：fengyuanchen/jquery-cropper Avoid creating new crop-boxfengyuanchen/jquery-cropper 避免创建新的裁剪框
【发布时间】：2020-09-30 20:36:44
【问题描述】：

我正在使用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;
    }

如下所示，一切正常。

问题

用户可以通过单击图像上的某处并拖动来更改裁剪区域的大小（见下图）。如何防止用户创建新的裁剪区域？

注意：用户应该能够移动裁剪框。

【问题讨论】：

标签： jquery cropper

【解决方案1】：

您可以使用以下选项 ....

dragMode: 'move',
toggleDragModeOnDblclick: false

【讨论】：