Vue—ImgCutter实现图片剪裁

上传图片时经常会用到图片剪裁：那么接下来分享的是Vue里的ImgCutter剪裁方法。
（实现功能如下图 ）

1、首先下载

npm install vue-img-cutter --save-dev

2、页面引入

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}

3、html部分

<div class="image" v-show="imgsComputed < 3">
			<!-- 图片剪裁 sizeChange(是否可拖动剪裁区域) slot="open"（点击调用剪裁）-->
			<ImgCutter ref="imgCutterModal" :sizeChange="false" toolBgc="none" :lockScroll="true" :boxWidth="800" :boxHeight="450"
			 :cutWidth="750" :cutHeight="392" @onPrintImg="onPrintImg" @cutDown="cutDown" @click="upload($event)">
				<div style="cursor:pointer;" slot="open">
					<p style="font-size: 30px;">+</p>
					<p style="15px">增加轮播图</p>
				</div>
			</ImgCutter>
		</div>

4、获取上传file对象

methods: {
			// 预览图片信息
			onPrintImg(e) {
				this.file = e.file
			},
		
			}

5、替换原本服务器获取的file对象就可以了