一个简单快捷的截图软件cropper.js

官网http://fengyuanchen.github.io/cropper/

需要引入的文件（此插件依赖jquery）

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript" src="js/jquery-cropper.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/cropper.css">

HTML结构

<div id="app">
      <img src="" id="image" alt="">
</div>

JS部分

$('#image').cropper({
      aspectRatio: 1 / 1,      //此处是截取图片后的比例 可以写16 / 9 也可以1 / 1;
      crop: function(e) {
        console.log(e)
        // Output the result data for cropping image.
        console.log(e.detail.x);
        console.log(e.detail.y);
        console.log(e.detail.width);
        console.log(e.detail.height);
        console.log(e.detail.rotate);
        console.log(e.detail.scaleX);
        console.log(e.detail.scaleY);
      }
});

cropper.js中的参数：

1、viewMode—定义cropper的视图模式

cropper.png

0：没有限制，3可以移动到2外。 
1 : 3只能在2内移动。 
2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙） 
3：2图片填充整个1

2、dragMode —-定义cropper的拖拽模式。

类型: String 
默认: ‘crop’ 
选项: 
‘crop’: 可以产生一个新的裁剪框
‘move’: 只可以移动
‘none’: 什么也不处理

3、responsive—在调整窗口大小的时候重新渲染cropper

类型：Boolean 默认：true；

4、restore—在调整窗口大小后恢复裁剪的区域。

类型：Boolean 默认：true；

5、checkCrossOrigin—-检查当前图像是否为跨域图像。

类型：Boolean 默认：true；

6、guides—显示在裁剪框上方的虚线。

类型：Boolean 默认：true； 

7、highlight–在裁剪框上方显示白色的区域(突出裁剪框)。

类型：Boolean 默认：true；

8、background–显示容器的网格背景。（就是后面的马赛克）

类型：Boolean 默认：true； 

9、autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。

类型：number 默认：0.8； 
就是裁剪框显示的大小

10、movable–是否允许可以移动后面的图片

类型：Boolean 默认：true；

11、scalable–是否允许缩放图像。

类型：Boolean 默认：true；

12、cropBoxMovable—是否通过拖拽来移动剪裁框。

类型：Boolean 默认：true；
改成false效果图为：剪裁框不可以拖动。

13、cropBoxResizable—是否通过拖动来调整剪裁框的大小。

类型：Boolean 默认：true； 
改成false效果图为：剪裁框不可以调整大小。

本文来源于：https://blog.csdn.net/weixin_38023551/article/details/78792400