核心是引用了Clipic.js来实现图片裁剪效果
Clipic.js源码地址==https://github.com/teojs/clipic
图片裁剪效果图如下
步骤
npm install clipic
//在使用的页面
<template>
<img :src="base64" />
<input type="file" name="file" accept="image/*" @change="uploadImg" />
</template>
import Clipic from 'clipic';
const clipic = new Clipic()
base64: '',
methods: {
uploadImg(event) {
const files = event.files
const reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = img => {
clipic.getImage({
width: 500,
height: 400,
src: img.target.result,
onDone: base64 => {
this.base64 = base64
}
})
}
event.value = ''
}
}