引用方式
-
在组件内使用
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度