选择图片时裁剪，缩放的效果

点击完成之后的预览效果

实现步骤

第1步：

npm i clipic --s

第2步

<template>
    <div>
		 <div class="photo">
		        <img :src="base64" />
		        <input type="file" name="file" ref="files" accept="image/*" @change="uploadImg" />
		 </div>
    </div>
</template>

第3步

<script>
	    import Clipic from 'clipic'
	    const clipic = new Clipic()
	    export default {
	        components: { },
	        data () {
	            return {
	                base64: './static/img/logo.png'
	            }
	        },
	        methods: {
	            uploadImg(event) {
	                let _this=this
	                const files = this.$refs.files.files;
	                const reader = new FileReader();
	                reader.readAsDataURL(files[0]);
	                reader.onload = img => {
	                    clipic.getImage({
	                        width: 500,
	                        height: 500,
	                        src: img.target.result,
	                        onDone: base64 => {
	                         //这里就是上传完成的回调函数，可以在这里请求接口上传至服务器
	                            _this.base64 = base64
	                            console.log(this.base64)   //图片上传完成后生成的base64
	                           
	                        }
	                    })
	                }
	                //执行完成之后把input的value值置空，否则无法选择相同的图片
	                this.$refs.files.value = ''
	            }
	        }
	    }
</script>