Я использую библиотеку 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;
}
Это нормально работает, как показано ниже.
Проблема
Пользователь может изменить размер области обрезки, щелкнув где-нибудь на изображении и перетащив (см. Изображение ниже).Как запретить пользователю создавать новую область обрезки?
Примечание. Пользователь должен иметь возможность перемещать поле обрезки.