2

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

这工作正常，如下所示。

图片1

问题

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

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

图片2

4

1 回答 1

1

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

dragMode: 'move',
toggleDragModeOnDblclick: false
于 2020-09-30T12:36:44.567 回答