效果图
参数备注
名称 | 功能 | 默认值 | 可选值 |
---|---|---|---|
img | 裁剪图片的地址 | 空 | url 地址 || base64 || blob |
outputSize | 裁剪生成图片的质量 | 1 | 0.1 - 1 |
outputType | 裁剪生成图片的格式 | jpg (jpg 需要传入jpeg) | jpeg || png || webp |
info | 裁剪框的大小信息 | true | true || false |
canScale | 图片是否允许滚轮缩放 | true | true \ |
autoCrop | 是否默认生成截图框 | false | true || false |
autoCropWidth | 默认生成截图框宽度 | 容器的80% | 0~max |
autoCropHeight | 默认生成截图框高度 | 容器的80% | 0~max |
fixed | 是否开启截图框宽高固定比例 | true | true | false |
fixedNumber | 截图框的宽高比例 | [1, 1] | [宽度, 高度] |
full | 是否输出原图比例的截图 | false | true | false |
fixedBox | 固定截图框大小 不允许改变 | false | true | false |
canMove | 上传图片是否可以移动 | true | true | false |
canMoveBox | 截图框能否拖动 | true | true | false |
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 |
内置方法
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度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度
this.$refs.cropper.cropH 截图框高度
// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
// do something
console.log(data)
})
// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
// do something
console.log(data)
})
说完了参数和方法,现在实战
- 安装
npm install vue-cropper
- 全局注册 (在main.js 引入)
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
- 在当前页面使用
<template>
<div>
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
></vueCropper>
</div>
</template>
<style scoped lang='less' rel='stylesheet/less'>
// 这个样式 一定不能少
.cropper-content {
.cropper {
width: auto;
height: 500px;
}
}
</style>
<script>
export default {
data() {
return {
dialogVisible: false,
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
// autoCropWidth: 300, // 默认生成截图框宽度
// autoCropHeight: 200, // 默认生成截图框高度
fixedBox: false, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [16, 10], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
}
};
},
methods: {
/*文件 转 b64*/
blobToDataURL(blob, callback) {
let a = new FileReader();
a.onload = function (e) {
callback(e.target.result); }
a.readAsDataURL(blob);
},
/*Blob 转 文件 */
blobToFile (theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
// 初始 传 file 和 回调函数
show(file, callback) {
this.callback = callback
this.fileinfo = file
this.blobToDataURL(file, (result) => {
this.$nextTick(() => {
this.option.img = result
})
})
},
// 获取裁剪内容
finish() {
this.$refs.cropper.getCropBlob((data) => {
var fileName = 'goods' + this.fileinfo.uid
this.dialogVisible = false
console.log(this.blobToFile(data, fileName))
this.callback(this.blobToFile(data, fileName))
})
}
}
}
</script>