Beschreibung: vue-cropper ist ein sehr nützliches Plug-In zum Zuschneiden von Bildern, das die Base64-Adresse oder Blob-Adresse des zugeschnittenen Bildes abrufen kann
1. Installation
# npm 安装
npm install vue-cropper
// npm安装或yarn安装，根据喜好2选一即可
# yarn 安装
yarn add vue-cropper
2. Einführung
......
import {
VueCropper } from 'vue-cropper'
......
export default {
components: {
VueCropper
}
}
3. Verwendung
Einige Attribute werden in der Vorlage verwendet und konfiguriert <vue-cropper />, wie folgt:
<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"
/>
Konfigurieren Sie diese Attribute in Daten, die bei Bedarf geändert werden können
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 展示看到的截图框宽高
},
}
},
Holen Sie sich den Screenshot-Inhalt.
① Holen Sie sich die Base64-Daten des Screenshots
this.$refs.cropper.getCropData(data => {
// do something
console.log(data)
})
② Rufen Sie die Blob-Daten des Screenshots ab
this.$refs.cropper.getCropBlob(data => {
// do something
console.log(data)
})
Meine Verwendung im Projekt: Klicken Sie auf die Schaltfläche „Bestätigen“, um die Übermittlungsmethode auszulösen, die Blob-Adresse des Screenshots abzurufen, sie in eine Dateiadresse umzuwandeln und an den Backend-Server zu übergeben, und der Server gibt die Adresse an oss zurück (d. h. Sie können eine nicht lokale Bild-URL abrufen, die im Allgemeinen möglicherweise nicht benötigt wird oder je nach Bedarf eine andere Verarbeitung durchführen muss. Nachdem Sie diese Adresse erhalten haben, senden Sie eine Anfrage an das Backend und speichern Sie das Bild auf dem Server. (Die Verwendung verschiedener Projekte kann unterschiedlich sein, aber im Allgemeinen sollten Sie die Bildadresse erhalten und sie auf den Back-End-Server hochladen.)
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() })
}