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 es 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=".css">
<link rel="stylesheet" href=".css">
<div class="img-container">
   <img src=".jpg" alt="" class="">
</div>

<script type="text/javascript" src=".js"></script>

<script type="text/javascript" src=".js"></script>

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 es 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>

• javascript
• image
• crop

• your demo works as you want – Jaromanda X Commented Aug 12, 2016 at 9:22
• My problem is once the user moves out of the image and es back the cropped corners are moved away from the cursor. which should not happen. – CodeZingat Commented Aug 12, 2016 at 9:25
• Oh I see ... that's an awful lot of code to work through, I'll leave it to someone with time on their hands – Jaromanda X Commented Aug 12, 2016 at 9:26
• ya I know that...not sure if its possible or not. – CodeZingat Commented Aug 12, 2016 at 9:29
• it's possible, 100% doable guaranteed - the position of the mouse is a known - obviously there's some sort of relative movement going on when there shouldn't be – Jaromanda X Commented Aug 12, 2016 at 9:45

1 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
    }
});