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