描述：vue-cropper是一个非常好用的图片裁剪插件，可以拿到裁剪后图片的base64地址或者blob地址
一.安装
# npm 安装
npm install vue-cropper
// npm安装或yarn安装，根据喜好2选一即可
# yarn 安装
yarn add vue-cropper
二.引入
......
import {
VueCropper } from 'vue-cropper'
......
export default {
components: {
VueCropper
}
}
三.使用
template中使用 <vue-cropper />并配置一些属性，如下：
<vue-cropper
ref="cropper"
:img="option.img"
:output-size="option.size"
:output-type="option.outputType"
:info="true"
:full="option.full"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:original="option.original"
:auto-crop="option.autoCrop"
:fixed="option.fixed"
:fixed-number="option.fixedNumber"
:center-box="option.centerBox"
:info-true="option.infoTrue"
:fixed-box="option.fixedBox"
/>
在data中配置这些属性，可以根据需要变更
data() {
return {
option: {
img: '(此处你可根据你的需求动态获取或固定图片路径)', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [5, 7], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: false, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
}
},
获取截图内容
①获取截图的 base64 数据
this.$refs.cropper.getCropData(data => {
// do something
console.log(data)
})
②获取截图的 blob 数据
this.$refs.cropper.getCropBlob(data => {
// do something
console.log(data)
})
我在项目中的使用：点击确认按钮后触发submit方法，获取截图的blob地址，再转为file地址后传递给后端服务器，服务器返回在oss上面的地址（就是能拿到一个非本地的图片url,一般可能不需要或者根据要求有别的处理），拿到这个地址后向后端发请求，在服务器保存这个图片。（不同项目使用可能不太相同，但一般应该都需要拿到图片地址上传给后端服务器）
submit() {
this.$refs.cropper.getCropData((dataTemp) => {
// dataTemp保存截图的base64数据
let file = this.dataURLtoFile(dataTemp, `${
new Date().getTime()}.png`) // 该方法为自己定义，将base64转为file格式,方便发送给服务器
let formData = new FormData()
formData.append('file', file)
request.post({
// 向后端发请求
url: `此处填写请求的url地址`,
methods: 'POST', // 请求方式
headers: {
'Content-Type': 'application/x-www-form-urlencoded' }, // 请求头
data: formData, //数据通过formData对象传递给后端服务器
}).then((res) => {
const {
server, fileNewName } = res.data.data // 请求后拿到的数据
const certificate_url = `${
server}/${
fileNewName}` // 两者拼接就是服务器返回的图片地址
this.idPhoto = certificate_url // idPhoto在data中有给初始值，这里将拿到的地址复制给idPhoto,后面再保存截图后就会在页面显示的图片就绑定这个地址
const user_id = this.$store.state.user.userId
// 我这里的操作为向后端发请求在服务器保存截取后的图片，idPhotoApi.idPhotoSave为另一个文件中的方法，如果有需要，可以根据需要发送自己的请求，上传图片。
idPhotoApi.idPhotoSave({
certificate_url, user_id }).then((res) => {
if (res.data.code === '200000') {
this.$toast(this.$t('图片上传成功'))
}
})
})
.catch((error) => this.$toast(error))
})
this.show = 3 // 此处是我切换界面的时候用的，data中有定义，一般不需要
},
// 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
dataURLtoFile (dataurl, filename) {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/u)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const blob = new Blob([u8arr], {
type: mime })
return new File([blob], filename, {
type: mime, lastModified: new Date() })
}