该插件的作者是xyxiao001,附上github地址
https://github.com/xyxiao001/vue-cropper
https://github.com/xyxiao001/vue-cropper
1、使用步骤
1.1、安装 vue-cropper
npm install vue-cropper
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper
}
1.2、基本使用方法
<!--外层容器包裹并设置宽高-->
<div style="width:100%;height:500px">
<vue-cropper autoCrop img="https://shnhz.github.io/shn-ui/img/Koala.jpg" ref="cropper" centerBox :fixedNumber="[2,1]"/>
</div>
<shn-button @click="getCropData()" block ref="cropper" style="margin:10px 0" type="primary">获取截图后的图片</shn-button>
export default {
methods:{
getCropData() {
this.$refs.cropper.getCropData(data => {
console.log(data)
})
}
}
}
2、API说明
2.1、属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
img | 裁剪图片的地址 | String | url 地址 / base64 / blob | — |
outputSize | 裁剪生成图片的质量 | Number | 0.1 - 1 | 1 |
outputType | 裁剪生成图片的格式 | String | jpeg / png / webp | jpeg |
info | 裁剪框的大小信息 | Boolean | true / false | true |
canScale | 图片是否允许滚轮缩放 | Boolean | true / false | true |
autoCrop | 是否默认生成截图框 | Boolean | true / false | false |
autoCropWidth | 默认生成截图框宽度 | String | — | 80% |
autoCropHeight | 默认生成截图框高度 | String | — | 80% |
fixed | 是否开启截图框宽高固定比例 | Boolean | true / false | true |
fixedNumber | 截图框的宽高比例 | Array | [宽度, 高度] | [1, 1] |
full | 是否输出原图比例的截图 | Boolean | true / false | true |
fixedBox | 固定截图框大小 不允许改变 | Boolean | true / false | true |
canMove | 上传图片是否可以移动 | Boolean | true / false | true |
canMoveBox | 截图框能否拖动 | Boolean | true / false | true |
original | 上传图片按照原始比例渲染 | Boolean | true / false | false |
centerBox | 截图框是否被限制在图片里面 | Boolean | true / false | false |
high | 是否按照设备的dpr 输出等比例图片 | Boolean | true / false | true |
infoTrue | true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | Boolean | true / false | false |
maxImgSize | 限制图片最大宽度和高度 | Number | — | 2000 |
enlarge | 图片根据截图框输出比例倍数 | String | — | 1 |
mode | 图片默认渲染方式 | String | contain / cover / 100px / 100% / auto | contain |
2.2、事件
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
@imgMoving | 图片移动事件 | — | — | — |
@cropMoving | 截图框移动事件 | — | — | — |
2.3、方法
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
startCrop | 开始截图 | — | — | — |
stopCrop | 停止截图 | — | — | — |
clearCrop | 清除截图 | — | — | — |
changeScale | 修改图片大小 正数为变大 负数变小 | — | — | — |
getImgAxis | 获取图片基于容器的坐标点 | — | — | — |
getCropAxis | 获取截图框基于容器的坐标点 | — | — | — |
goAutoCrop | 自动生成截图框函数 | — | — | — |
rotateRight | 向右边旋转90度 | — | — | — |
rotateLeft | 向左边旋转90度 | — | — | — |
getCropData | 获取截取后的图片内容 | | | |
3、完整代码展示
<template>
<div>
<el-button class="primary" @click="dialogVisible = true">图片截取</el-button>
<div class="home" style="width:100%;height:500px">
<el-dialog
title="截取文件"
:visible.sync="dialogVisible"
width="30%"
>
<div class="cropper" >
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:canScale='option.canScale'
:autoCrop='option.autoCrop'
:autoCropWidth='option.autoCropWidth'
:autoCropHeight='option.autoCropHeight'
:canMoveBox='option.canMoveBox'
:canMove='option.canMove'
:centerBox='option.centerBox'
:info='option.info'
:fixedBox='option.fixedBox'
@realTime='realTime'
></vueCropper>
</div>
<el-upload class="upload-demo"
:auto-upload="false"
:on-change="getImgUrl"
:show-file-list="false"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<img :src='previewImg' alt="" class='previewImg' ref="img" style="display:block">
<el-button type='primary' @click='handleClick'>确定</el-button>
</el-dialog>
<img :src="resImg" alt="" v-if="resImg" class='previewImg'>
</div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
data () {
return {
dialogVisible:false,
option: {
img: require('../assets/images/swiper1.png'), // 裁剪图片地址
outputSize: 1, // 裁剪生成图片质量
outputType: 'jepg', // 裁剪生成图片格式
canScale: true, // 图片是否允许滚轮播放
autoCrop: true, // 是否默认生成截图框 false
info: true, // 是否展示截图框信息
autoCropWidth: 300, // 生成截图框的宽度
autoCropHeight: 200, // 生成截图框的高度
canMoveBox: true, // 截图框是否可以拖动
fixedBox: false, // 固定截图框的大小
canMove: false, // 上传图片是否可拖动
centerBox: true, // 截图框限制在图片里面
},
resImg: null, //截图后图片
previewImg: null, // 预览后的图片
lists:[]
}
},
components: {
VueCropper
},
methods: {
//点击获取图片路径
getImgUrl(file){
console.log(file)
this.option.img = file.url;
},
handleClick () {
//获取截图后的数据
this.$refs.cropper.getCropData(data => {
this.resImg = data
//关闭模态框
this.dialogVisible = false;
})
},
realTime (data) {
const that = this
this.$refs.cropper.getCropBlob(data => {
// 这里data数据为Blob类型,blobToDataURI方法转换成base64
this.blobToDataURI(data, function(res) {
that.previewImg = res
})
})
},
blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
},
},
}
</script>
<style scoped>
.reviewImg{
width: 200Px;
height: 200Px;
object-fit: cover;
border-radius: 50%;
}
.cropper{
width: 500px;
height: 500px;
border: 1px solid orange;
}
</style>