上传头像，头像裁剪功能

需要用到的js：裁剪：<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script>

vant：

使用vant
afterRead(file) {
　　this.headimg = file.content
　　this.myCropper.replace(file.content)
　　this.showCropper = true
},

 

html：

<!-- 裁剪弹窗 -->
<div class="cropper_wrap" v-show="showCropper">
　　<div class="poster">
　　　　<img :src="headimg" ref="uploadImg" alt="">
　　</div>
　　<div class="submit" @click="resultCropper">
　　　　<img src="/resources/images/modify_icon_caijian.png" alt="" />
　　　　<p>裁剪</p>
　　</div>
</div>

css样式：

#app .cropper_wrap {
　　position: fixed;
　　top: 0;
　　left: 0;
　　z-index: 999;
　　width: 100%;
　　height: 100%;
　　background: #000;
}

#app .cropper_wrap .poster {
　　width: 100%;
}

#app .cropper_wrap .poster img {
　　display: block;
　　width: 100%;
　　height: 100%;
}

#app .cropper_wrap .submit {
　　position: absolute;
　　bottom: 1.2rem;
　　left: 50%;
　　transform: translateX(-50%);
　　color: #fff;
　　font-size: 0.5rem;
　　text-align: center;
}

#app .cropper_wrap .submit img {
　　width: 1.5rem;
　　margin-bottom: 0.2rem;
}

mounted() {

                this.initCropper()  //调用初始裁剪框

  },

methods中初始化裁剪框：

// 初始化裁剪框

                initCropper() {

                    this.myCropper = new Cropper(this.$refs.uploadImg,{

                        aspectRatio: 1,

                        viewMode: 1,

                        background: false, //网格装背景

                        zoomOnTouch: true, //触摸缩放图片

                        zoomOnWheel: false, // 滚轮缩放图片

                    })

                },

// 裁剪返回图片

                resultCropper() {

                    var resultImg = this.myCropper.getCroppedCanvas({

                            imageSmoothingQuality: 'high'

                        }).toDataURL('image/jpeg')

                        this.headimg = resultImg

                        this.showCropper = false

                        //  base64转图片接口   

                    this.$http.post(baseUrl+"/api/uploadImages",{

                            token:this.userInfo.token,

                            vid: this.userInfo.vid,

                            image:resultImg,

                            stype:4

                    }, {emulateJSON: true}).then((res)=>{

                        if(res.body.code == 200){

                            this.upimg = res.body.data

                        }

                    })

                },