I am using jquery-cropper library for cropping images. The following is my current code.
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;
}
This is working fine as shown below.
Problem
User can change the crop area size by clicking somewhere on the image and dragging(see image below). How do I prevent the user from creating a new crop area?
Note: User should be able to move the crop box around.
