裁剪图片并上传base64格式(步骤二)

npm i vue-cropper --save安装插件
插件地址github搜索vue-cropper
地址：https://github.com/xyxiao001/vue-cropper

<template>
	<div id="cropper">
		<div style="width: 100%;height: 100%;">
			<VueCropper
			    ref="cropper"
			    :img="option.img"
			    :outputSize="option.size"
			    :info="true"
			    :full="option.full"
			    :canMoveBox="option.canMoveBox"
			    :original="option.original"
			    :autoCrop="option.autoCrop"
				:autoCropWidth="option.autoCropWidth"
				:autoCropHeight="option.autoCropHeight"
			    :fixed="option.fixed"
			    :fixedNumber="option.fixedNumber"
				:canMove="option.canMove"
			    :centerBox="option.centerBox"
				:high="option.high"
			    :infoTrue="option.infoTrue"
			    :fixedBox="option.fixedBox"
				@realTime = "realTime"
			  ></VueCropper>
		</div>
		<p class="ok_btn" @click="cropper">完成</p>
		<div>
			
		</div>
		
		<img :src="preview" alt="" class="previewImg">
	</div>
</template>

<script>
	import {VueCropper} from 'vue-cropper'
	export default{
		components:{VueCropper},
		data(){
			return{
				option: {
					img: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 裁剪图片的地址
					info: true, // 裁剪框的大小信息
					outputSize: 0.4, // 裁剪生成图片的质量
					// outputType: 'jpeg', // 裁剪生成图片的格式
					canScale: false, // 图片是否允许滚轮缩放
					autoCrop: true, // 是否默认生成截图框
					autoCropWidth: 200, // 默认生成截图框宽度
					autoCropHeight: 200, // 默认生成截图框高度
					fixedBox: false, // 固定截图框大小 不允许改变
					fixed: true, // 是否开启截图框宽高固定比例
					fixedNumber: [1, 1], // 截图框的宽高比例
					full: false, // 是否输出原图比例的截图
					canMove:false, // 图片是否可以移动
					canMoveBox: true, // 截图框能否拖动
					high:false, //按照设备dpr等比输出图片
					original: false, // 上传图片按照原始比例渲染
					centerBox: true, // 截图框是否被限制在图片里面
					infoTrue: false // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
				},
				cropperData:null,
				preview:''
			}
		},
		methods:{
			realTime(data){
				//裁剪获取base64数据，赋值给预览图片
				this.$refs.cropper.getCropData((data) => {
					// do something
					this.preview = data 
				})
				// console.log(data)
			},
			cropper(){
				//点击完成跳转回头像页
				this.$store.commit('changeImg',this.preview)
				this.$router.go(-1)
			}
		},
		created(){
			this.option.img = 'https://img.yzcdn.cn/vant/apple-1.jpg'
			// console.log('cropper',this.option.img)
		}
	}
</script>

<style lang="less" scoped>
	#cropper{
		width: 100%;
		height: 100%;
		position: relative;
		// background: #000;
		.vue-cropper{
			background: #000
		}
		.ok_btn{
			position: absolute;
			bottom: 60px;
			right:60px;
			color:#fff;
		}
		.previewImg{
			position: absolute;
			bottom: 60px;
			left:60px;
			width: 200px;
			height: 200px;
		}
	}
</style>

未完待续。。。