引用方式
在组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
基本使用方法
ref="cropper"
:img="option.img"
:autoCrop="true"
:fixedNumber="[1,1]"
:fixed="true"
>
选择图片后需要传这个图片的地址给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度
：more命令)
