使用vuecropper实现图片裁剪，放大缩小，实时预览等

效果图

1、安装

npm install vue-cropper -S


2、main.js引用

import VueCropper from 'vue-cropper'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(VueCropper)


3、主要文件（封装成组件）

<template>
<div id="cropper">
<VueCropper ref="cropper"
:img='url'
:info=option.info
:outputSize=option.outputSize
:outputType=option.outputType
:canMove=option.canMove
:autoCrop=option.autoCrop
:autoCropWidth=option.autoCropWidth
:autoCropHeight=option.autoCropHeight
:fixedBox=option.fixedBox
:original=option.original
:infoTrue=option.infoTrue
:centerBox=option.centerBox
:canMoveBox=option.canMoveBox
:canScale=option.canScale
:fixed=option.fixed
:fixedNumber=option.fixedNumber
@realTime="realTime">
</VueCropper>
<a-button type="primary"
@click="chooseImg">选择图片</a-button>
<input type="file"
@change="getFile"
accept="image/*"
ref="imginput"
id="img-input">
<a-button type="primary"
@click="startCrop">保存截图</a-button>
<a-button type="primary"
@click="scaleBigger">放大</a-button>
<a-button type="primary"
@click="scaleSmaller">缩小</a-button>
<a-button type="primary"
@click="rotateLeft">左旋转</a-button>
<a-button type="primary"
@click="rotateRight">右旋转</a-button>
<a-button type="primary"
@click="reload">重置大小</a-button>
<a-button type="primary"
@click="rotateClear">重置旋转</a-button>
<a-button type="primary"
@click="refresh">重置所有</a-button>
<a-progress :percentage="percentage"
v-show="isShow"></a-progress>
<!-- 预览图片 -->
<div v-html="previewHTML"></div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { pathToBase64, base64ToPath } from 'image-tools'
export default {
data() {
return {
option: {
outputSize: 1, // 裁剪生成图片的质量 0.1 - 1
outputType: 'png', // 裁剪生成图片的格式 jpeg || png || webp
canScale: true, // 图片是否允许滚轮缩放 默认true
autoCrop: true, // 是否默认生成截图框 默认false
canMove: true, //上传图片是否可以移动 默认true
autoCropWidth: 200, //默认生成截图框宽度 容器的80% 0~max
autoCropHeight: 200, //默认生成截图框高度 容器的80% 0~max
// fixedBox: true, // 固定截图框大小 不允许改变 false true | false
fixed: true, //是否开启截图框宽高固定比例
original: false, // 上传图片按照原始比例渲染 false true | false
infoTrue: false, // 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true | false
centerBox: true, // 截图框是否被限制在图片里面 false true | false
canMoveBox: true, //截图框能否拖动 true true | false
fixedNumber: [1, 1] // 截图框的宽高比例 [宽度, 高度]
},
url: '',
previewHTML: '',
cropperSrc: '',
param: {
// 上传参数
originalFilename: '',
contentType: 'image/jpeg',
cropImgPath: '', // 接口要求传入截图的图片路径格式为blob:http://192.168.0.109:8080/95dbc0cd-5624-4e11-8a45-b7a1a855020d
},
flag: true,
percentage: 0,// 上传进度
isShow: false
}
},
components: {
VueCropper
},
methods: {
// 点击选择图片
chooseImg() {
this.$refs.imginput.click()
},
//保存截图
startCrop() {
if (!this.flag) return false
this.flag = false
// 获取截图的base64 数据
this.$refs.cropper.getCropData(data => {
this.cropperSrc = data;
// base64数据转成图片(用了插件)
base64ToPath(data)
.then(path => {
this.param.cropImgPath = path;
console.log(path);
// 上传到服务器
this.upload(this.param);
})
.catch(error => {
console.error(error)
})
})
},
// 图片放大
scaleBigger() {
this.$refs.cropper.changeScale(1)
},
// 图片缩小
scaleSmaller() {
this.$refs.cropper.changeScale(-1)
},
// 图片左旋转90°
rotateLeft() {
this.$refs.cropper.rotateLeft()
},
// 图片右旋转90°
rotateRight() {
this.$refs.cropper.rotateRight()
},
// 重置大小
reload() {
this.$refs.cropper.reload()
},
// 重置旋转
rotateClear() {
this.$refs.cropper.rotateClear()
},
// 重置所有
refresh() {
// this.$refs.cropper.refresh() ;
this.$refs.cropper.reload()
this.$refs.cropper.rotateClear()
},
// 进度条展示
showProgress(res) {
this.$nextTick(() => {
this.percentage = Math.floor(res.loaded / res.total * 100)
})
},
// 图片上传
upload(param) {
this.isShow = true;
// 具体请求不显示
console.log('上传图片');
},
// input选择图片
getFile(e) {
var vm = this
console.log(e);
// let file = this.$refs.imginput.files[0]
const file = e.target.files[0]
if (!/image\/\w+/.test(file.type)) {
this.$message({
message: '请选择图片',
type: 'warning'
})
// 清空input值
this.$refs.imginput.value = ''
return false
}
this.param.originalFilename = file.name
// 创建文件读取对象
var reader = new FileReader()
reader.readAsDataURL(file)
// 文件读取结束
reader.onload = function (e) {
// 此处this === reader
vm.url = this.result;
vm.previewUrl = this.result;
}
},
// 图片预览
realTime(data) {
console.log(data);
this.previewHTML = data.html;
},
}
}
</script>
<style lang="scss" scoped>
#cropper {
margin: 0 auto;
height: 350px;
width: 850px;
.vue-cropper {
width: 300px;
height: 300px;
margin: 0 auto;
.cropper-crop-box {
transform: translate3d(0px, 0px, 0px);
}
}
}
#img-input {
display: none;
}
</style>