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

Stop crop for cropper js outside the image

本文关键字:裁剪 js 图像 外部      更新时间:2023-09-26

当用户在裁剪时将光标拖出图像时,需要停止裁剪。

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

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

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

您可以通过将viewMode设置为1(默认= 0)来实现这一点

使用jQuery cropper插件的例子:

var $image = $("#PreviewImage");
$image.cropper({
    viewMode: 1,
    crop: function(event) {
       // do something
    }
});