停止裁剪图像外的裁剪器js

Question

一旦用户在裁剪时将光标拖出图像，就需要停止裁剪。

我的问题是，一旦用户移出图像并返回，裁剪的角落就会远离光标。这应该不会发生。

以下是我创建的简单演示。

<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

您可以通过将viewMode设置为1（默认= 0）来实现此目的

带有jQuery裁剪器插件的示例：

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

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