本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单 进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。 :fixedNumber="[1,1]" :fixed="true" ></vueCropper>

选择图片后需要传这个图片的地址给vueCropper，所以本地选择图片后要处理一下，得到base64地址

changeUpload(file) {
    var that = this
    console.log(file)
    that.file = file
    var reader = new FileReader() // 这里使用FileReader() 来得到图片地址
    reader.onload = function(e) {
        that.option.img = e.target.result
    reader.readAsDataURL(file.raw)
当点击保存裁剪的时候调用组件的方法getCropBlob会得到blob类型的数据,我用的七牛上传图片，需要file类型的图片数据，所以这里要做转化，代码如下
 
this.$refs.cropper.getCropBlob((data) => {
    console.log(data)
    let files = new window.File([data], this.file.name, {type: data.type})
    console.log(this.file)
    Upload(files, this.file.name, (res) => {
        let url = `http://pv4kob423.bkt.clouddn.com/${res.key}`
        console.log(res)
        that.update(url) // 拿到url后去修改用户头像
所以prop功能
 
内置方法 通过this.$refs.cropper 调用
this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度