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

更新时间：2021-09-07 10:06:53

引用方式

在组件内使用

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度

上一篇 : ：理解闭包下一篇 : ES6 const 介绍

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

引用方式

相关阅读

推荐文章