Stop crop for cropper js outside the image

Question

Need to stop crop once the user drags cursor out of the image while cropping.

My problem is once the user moves out of the image and comes back the cropped corners are moved away from the cursor. which should not happen.

Below is the simple demo what I have created.

<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/main.css">
<div class="img-container">
   <img src="https://fengyuanchen.github.io/cropper/images/picture.jpg" alt="" class="">
</div>

<script type="text/javascript" src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>

<script type="text/javascript" src="https://fengyuanchen.github.io/cropperjs/js/main.js"></script>

Answer 1

You can achieve this by setting the viewMode to 1 (default = 0)

Example with the jQuery cropper plugin:

var $image = $("#PreviewImage");

$image.cropper({
    viewMode: 1,
    crop: function(event) {
       // do something
    }
});