停止裁剪图像外的cropper js答案

【问题标题】：Stop crop for cropper js outside the image停止裁剪图像外的cropper js
【发布时间】：2016-12-19 06:05:21
【问题描述】：

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

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

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

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

【问题讨论】：

您的演示可以随心所欲地进行
我的问题是一旦用户移出图像并返回，裁剪的角落就会远离光标。这不应该发生。
哦，我明白了......要处理的代码非常多，我会把它留给有时间的人
是的，我知道...不确定它是否可能。
有可能，保证 100% 可行 - 鼠标的位置是已知的 - 显然在不应该存在的情况下发生了某种相对运动

标签： javascript image crop

【解决方案1】：

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

jQuery 裁剪器插件示例：

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

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

【讨论】：