lichong
/
h5_api_v1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

master
lc18518571399 11 months ago
parent
34bdd8b1e3
commit
ed9dcd92d1
4 changed files with 75 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      front/package.json
  2. 3
      front/src/main/index.js
  3. 114
      front/src/renderer/src/App.vue
  4. 14
      front/src/renderer/src/assets/css/base.css

3
front/package.json
View File

@ -26,7 +26,8 @@
"lodash": "^4.17.21",
"pinia": "^2.1.7",
"pinia-plugin-persist": "^1.0.0",
"qrcode": "^1.5.3"
"qrcode": "^1.5.3",
"qrcode-vue3": "^1.6.8"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",

3
front/src/main/index.js
View File

@ -57,7 +57,8 @@ app.whenReady().then(() => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
ipcMain.on('sendMessage', async (eve, msg) => {
let res = await axios.post(`http://127.0.0.1:7001/api/upload`, msg)
// let res = await axios.post(`http://127.0.0.1:7001/api/upload`, msg)
let res = await axios.post(`http://123.249.20.25:9019/api/upload`, msg)
mainWindow.webContents.send('reply', res.data)
})
})

114
front/src/renderer/src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="appClass" v-if="isVip">
<dv-border-box1 ref="borderRef" style="text-align: center; width: 100vw; height: 100vh">
<dv-button style="width: 90%; margin-left: 5%">米微婚礼</dv-button>
<span style="font-size:2em;color: aquamarine;">米微婚礼</span>
<div class="topinput">
<dv-border-box8 :dur="5" class="topinputinfo">
<div dv-bg>
@ -33,13 +33,14 @@
<el-button type="primary" @click="takePhotoUpload">打开视频</el-button>
<el-button type="primary" @click="takePhoto">拍照</el-button>
<el-button type="success" @click="updateSeach">上传查看</el-button>
<el-button type="success" @click="searchQrcode">下载</el-button>
</div>
<div class="botimg">
<div id="camera">
<video ref="videoEL" width="500px" height="450px" autoplay v-if="!form.img"></video>
<video ref="videoEL" width="500px" height="480px" autoplay v-if="!form.img"></video>
<!--canvas截取流-->
<canvas ref="canvas" width="500px" height="450px" v-show="form.img"></canvas>
<canvas ref="canvas" width="500px" height="500px" id="canvas" v-show="form.img"></canvas>
<canvas width="180px" height="180px" id="canvas1"
style="position: absolute;top: 48vh;left: calc(50vw - 90px);"></canvas>
</div>
</div>
</dv-border-box1>
@ -49,12 +50,11 @@
<el-tag type="danger" class="noVipTag">体验已过期，请联系管理员。</el-tag>
</h3>
</div>
<div calss="yanmo"><canvas id="canvas"></canvas></div>
</template>
<script>
import _ from 'lodash'
import Qrcode from 'qrcode'
import QRCode from 'qrcode'
import useConfigStore from './stores/config.js'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
@ -72,8 +72,7 @@ export default {
videoEL: null,
isVip: false,
pngObj: {},
pngDialog: false,
qrcodeData: "",
qrString: "",
}
},
methods: {
@ -100,7 +99,7 @@ export default {
video: {
sourceId: device.deviceId, // 把对应的 摄像头ID 放到这里
width: 500,
height: 450
height: 480
//如果拍照不清晰，考虑加入以下参数，但考虑下摄像头的高度和画布的高度
// width:{min: 1000, ideal: 1000, max: 3264 },
// height:{min: 1080, ideal: 1080, max: 2488}
@ -113,16 +112,24 @@ export default {
this.$refs['videoEL'].play()
})
.catch((error) => {
console.error('摄像头开启失败，请检查摄像头是否可用！')
ElMessage.error('摄像头开启失败，请检查摄像头是否可用！')
})
})
},
async takePhoto() {
let ctx = this.$refs['canvas'].getContext('2d')
// // 清除二维码
// let ctx1 = document.getElementById('canvas1').getContext('2d')
// ctx1.width=500
// ctx1.height=500
// ctx.clearRect(0, 0, 500, 500);
let ctx = document.getElementById('canvas').getContext('2d')
ctx.width = 500
ctx.height = 480
// 把当前视频帧内容渲染到canvas上
ctx.drawImage(this.$refs['videoEL'], 0, 0)
ctx.drawImage(this.$refs['videoEL'], 0, 0, 500, 480)
// 转base64格式、图片格式转换、图片质量压缩
this.form.img = this.$refs['canvas'].toDataURL('image/png', 0.2) // 由字节转换为KB 判断大小
this.form.img = this.$refs['canvas'].toDataURL('image/png', 0.5) // 由字节转换为KB 判断大小
if (!this.$refs['videoEL'].srcObject) return
let stream = this.$refs['videoEL'].srcObject
let tracks = stream.getTracks()
@ -133,6 +140,11 @@ export default {
},
async updateSeach() {
this.pngObj = {}
ElMessage({
type: 'success',
duration: 5000,
message: '图片转化成功请5秒后，扫描二维码获取',
})
window.electron.ipcRenderer.send('sendMessage', {
name: this.form.name,
age: this.form.age,
@ -150,40 +162,46 @@ export default {
type: 'error'
})
} else {
ElMessage({
type: 'info',
duration: duration - 500,
customClass: 'yanmo',
icon: 'check',
message: '恭喜你，答对了！',
appendTo: document.getElementById(`yanmo${perIndex}`)
})
ElMessage({ message: '上传成功', type: 'success' })
console.log(999, that.pngObj.list)
let canvas = document.getElementById('canvas')
let baseurl="http://127.0.0.1:7001"
let res = Qrcode.toCanvas(canvas, `${baseurl}/?id=${_.get(this.pngObj, ["list", "_id"])}`, function (error) {
if (error) console.error(error)
console.log('success!');
let ctx = document.getElementById('canvas').getContext('2d')
ctx.width = 500
ctx.height = 500
ctx.clearRect(0, 0, 500, 500);
let baseurl = "http://123.249.20.25:9019"
// let baseurl = "http://127.0.0.1:7001"
that.qrString = `${baseurl}/?id=${_.get(that.pngObj, ["list", "_id"])}`
let canvas = document.getElementById('canvas1')
console.log(777, that.pngObj, baseurl)
QRCode.toCanvas(canvas, that.qrString, function (error) {
if (error) {
ElMessage({
type: 'error',
duration: 5000,
message: error,
})
} else {
ElMessage({
type: 'success',
duration: 15000,
message: '15秒后二维码消失',
})
}
})
// 设置5秒后关闭弹窗
setTimeout(() => {
that.qrString = ""
let ctx = canvas.getContext("2d")
ctx.width = 500
ctx.height = 500
ctx.clearRect(0, 0, 500, 500);
}, 15000);
}
})
},
searchQrcode() {
this.pngDialog = true
},
},
async mounted() {
console.log(8877, QRCode)
this.watchPng()
// let canvas = document.getElementById('canvas')
// let baseurl="http://127.0.0.1:7001"
// Qrcode.toCanvas(canvas, `${baseurl}/?id=${_.get(this.pngObj, ["list", "_id"])}`, function (error) {
// if (error) console.error(error)
// console.log('success!');
// })
// let canvas11 = document.getElementById('canvas')
// console.log(874, canvas11)
let fiveDay = dayjs('2024-05-18T00:00:00').valueOf()
let fiveDay = dayjs('2024-05-21T00:00:00').valueOf()
if (!this.isVip) {
if (dayjs().valueOf() > fiveDay) {
this.isVip = false
@ -206,17 +224,27 @@ export default {
}
.topinput {
height: calc(40vh - 62px);
height: calc(30vh - 62px);
text-align: -webkit-center;
}
.topinputinfo {
height: 45px;
height: 48px;
width: 360px;
margin: 12px 0;
}
.botimg {
height: 60vh;
height: 70vh;
}
.yanmo {
position: absolute;
height: 0vh;
width: 0vw;
overflow: visible;
top: 20vh !important;
background-color: #83838399;
border: none;
}
</style>

14
front/src/renderer/src/assets/css/base.css
View File

@ -11,17 +11,3 @@ body {
line-height: 45px;
}
.yanmo {
position: absolute;
height: 0vh;
width: 0vw;
overflow: visible;
top: 20vh !important;
background-color: #83838399;
border: none;
}
#canvas {
height: 400px;
width: 400px;
}
Write Preview
Loading…
Cancel
Save