diff --git a/front/package.json b/front/package.json
index 750160f..eb13661 100644
--- a/front/package.json
+++ b/front/package.json
@@ -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",
diff --git a/front/src/main/index.js b/front/src/main/index.js
index 1aac77a..3c43783 100644
--- a/front/src/main/index.js
+++ b/front/src/main/index.js
@@ -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)
})
})
diff --git a/front/src/renderer/src/App.vue b/front/src/renderer/src/App.vue
index 0c76490..8650371 100644
--- a/front/src/renderer/src/App.vue
+++ b/front/src/renderer/src/App.vue
@@ -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>
diff --git a/front/src/renderer/src/assets/css/base.css b/front/src/renderer/src/assets/css/base.css
index 5254a8c..fcc8e40 100644
--- a/front/src/renderer/src/assets/css/base.css
+++ b/front/src/renderer/src/assets/css/base.css
@@ -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;
-}
\ No newline at end of file