记录vue中Cropper.js裁切插件的使用

git地址：https://github.com/fengyuanchen/cropper
官方演示地址：https://fengyuanchen.github.io/cropper/

1、下载：npm install cropperjs
2、main.js中引入：import Cropper from 'cropperjs'
3、初始化：

<img src="https://fengyuanchen.github.io/cropper/images/picture.jpg" alt="" id="image">

        //初始化这个裁剪框
        methods:{
        	init(){
		        let image = document.getElementById('image');
		        this.cropper = new Cropper(image, {
		          autoCrop: false,
		          viewMode: 2,//裁切模式
		          guides : true ,//是否在剪裁框上显示虚线。
		          dragCrop :true ,//是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
		          autoCropArea : 0.2 ,
		          movable:true,//是否允许移动裁剪框
		          resizable:true,//是否允许改变剪裁框的大小。
		          zoomable:false,//是否允许放大缩小底部图片。
		          minCropBoxWidth:64,//设置最小裁切框宽度
		          minCropBoxHeight:64,//设置最小裁切框高度
		          ready: function () {
		            that.croppable = true;
		            this.cropper.crop();
		            // x轴的坐标
		            let imgX = 100
		            // Y轴的坐标
		            let imgY = 20
		            // 裁切框的宽
		            let imgW = 200
		            // 裁切框的高
		            let imgH = 200
		            let imgData = {
		              "x":imgX,
		              "y":imgY,
		              "width":imgW,
		              "height":imgH,
		              "rotate":0,
		              "scaleX":1,
		              "scaleY":1
		            }
		            //设置裁切框的大小和位置
		            that.cropper.setData(imgData);
		          },
		          cropend:function () {
		            console.log('裁切完成')
		          }
		        });
			}
		}

注：
1、this.cropper.setData：可以设置初始化时裁切框的大小和位置；
2、裁切框可以通过css自定义裁切框的样式，可以F12查看一下默认样式的class隐藏，替换成自己的裁切框背景图