使用vue-cropper裁剪正方形上传头像-阿里云开发者社区

开发者社区> 云原生> 正文
登录阅读全文

使用vue-cropper裁剪正方形上传头像

简介: 引用方式 在组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import VueCropper from 'vue-cropper' Vue.

引用方式

  • 在组件内使用

    import { VueCropper }  from 'vue-cropper' 
    components: {
      VueCropper,
    },
  • main.js里面使用

    import VueCropper from 'vue-cropper' 
    Vue.use(VueCropper)
  • 基本使用方法

    <vueCropper
      ref="cropper"
      :img="option.img"
      :autoCrop="true"
      :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功能

名称 功能 默认值 可选值
img 裁剪图片的地址 url 地址、base64、blob
outputSize 裁剪生成图片的质量 1 0.1 - 1
outputType 裁剪生成图片的格式 jpg (jpg 需要传入jpeg) jpeg png webp
info 裁剪框的大小信息 true true false
canScale 图片是否允许滚轮缩放 true true false
autoCrop 是否默认生成截图框 false true false
autoCropWidth 默认生成截图框宽度 容器的80% 0~max
autoCropHeight 默认生成截图框高度 容器的80% 0~max
fixed 是否开启截图框宽高固定比例 true truefalse
fixedNumber 截图框的宽高比例 [1, 1] [宽度, 高度]
full 是否输出原图比例的截图 false true false
fixedBox 固定截图框大小 不允许改变 false true false
canMove 上传图片是否可以移动 true true false
canMoveBox 截图框能否拖动 true truefalse
original 上传图片按照原始比例渲染 false true false
centerBox 截图框是否被限制在图片里面 false true false
high 是否按照设备的dpr 输出等比例图片 true true false
infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true false
maxImgSize 限制图片最大宽度和高度 2000 0-max
enlarge 图片根据截图框输出比例倍数 1 0-max(建议不要太大不然会卡死的呢)
mode 图片默认渲染方式 contain contain , cover, 100px, 100% auto标题1 标题2 标题3
内置方法 通过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度

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

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章