1.0
This commit is contained in:
parent
5079c10678
commit
4609cdc36e
176
src/App.vue
176
src/App.vue
|
|
@ -1,183 +1,15 @@
|
|||
<template>
|
||||
<div class="img_bg_camera">
|
||||
<!-- 透明度 -->
|
||||
<video id="videoCamera" autoplay hidden></video>
|
||||
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
|
||||
<div style="display: flex; justify-content: center; align-items: center; height: 102vh;">
|
||||
<el-card class="contain" style="display: flex; justify-content: center; align-items: center;">
|
||||
<p>标题</p>
|
||||
<el-card style="width: 1100px; height: 450px;">
|
||||
<!-- 返回的内容展示 -->
|
||||
<div style="height: 400px; overflow-y: auto;">
|
||||
<div style="display: flex; align-items: flex-start; justify-content: flex-start;">
|
||||
<el-tag style="font-size: 14px; font-weight: bold;">分析结果：</el-tag>
|
||||
</div>
|
||||
<div v-for="apiMessage in AiMessage" :key="apiMessage">
|
||||
<el-card style="margin: 10px;">
|
||||
<p>{{ apiMessage }}</p>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-button style="margin-top: 10px;" type="success" @click="setImage()">开启识别</el-button>
|
||||
<el-button style="margin-top: 10px;" type="warning" @click="stopImageCapture()">停止识别</el-button>
|
||||
<div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgif: false,
|
||||
videoWidth: 250,
|
||||
videoHeight: 250,
|
||||
imgSrc: '',
|
||||
thisCancas: null,
|
||||
thisContext: null,
|
||||
thisVideo: null,
|
||||
imga: '',
|
||||
intervalId: null,//
|
||||
AiMessage: [
|
||||
],
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCompetence() {
|
||||
this.thisCancas = document.getElementById('canvasCamera');
|
||||
this.thisContext = this.thisCancas.getContext('2d');
|
||||
this.thisVideo = document.getElementById('videoCamera');
|
||||
|
||||
// 简化对 navigator.mediaDevices 的支持检查
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
console.error('浏览器不支持 mediaDevices API');
|
||||
return;
|
||||
}
|
||||
|
||||
const constraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
width: this.videoWidth,
|
||||
height: this.videoHeight,
|
||||
transform: 'scaleX(-1)'
|
||||
}
|
||||
};
|
||||
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
|
||||
// 使用现代方式设置视频流
|
||||
this.thisVideo.srcObject = stream;
|
||||
this.thisVideo.onloadedmetadata = () => {
|
||||
this.thisVideo.play();
|
||||
};
|
||||
console.log("打开摄像头");
|
||||
}).catch(err => {
|
||||
console.error('获取媒体输入失败', err);
|
||||
});
|
||||
},
|
||||
// 绘制图片（拍照功能）
|
||||
sendImageToServer(imgData) {
|
||||
axios.post('http://124.71.135.249:8081/apiSend', {
|
||||
image: imgData
|
||||
}).then(response => {
|
||||
if (response.data.msg === "ok") {
|
||||
this.$message({
|
||||
message: '图像识别成功！',
|
||||
type: 'success'
|
||||
});
|
||||
console.log(response.data.choices[0].message.content, "返回的数据");
|
||||
this.AiMessage.push(response.data.choices[0].message.content)
|
||||
console.log(this.AiMessage);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('发送图片时出错', error);
|
||||
});
|
||||
},
|
||||
setImage() {
|
||||
console.log("开始拍照")
|
||||
this.$message({
|
||||
message: '开始识别',
|
||||
type: 'success'
|
||||
});
|
||||
this.imgif = true;
|
||||
var _this = this;
|
||||
// 如果已经有一个定时器在运行，先清除它
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
// 设置定时器，每五秒拍照一次
|
||||
this.intervalId = setInterval(function () {
|
||||
// 点击，canvas画图
|
||||
_this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250);
|
||||
console.log(_this.thisContext);
|
||||
|
||||
// 获取图片base64链接
|
||||
var image = _this.thisCancas.toDataURL('image/png');
|
||||
_this.imgSrc = image;
|
||||
window.sessionStorage.setItem("img", _this.imgSrc);
|
||||
_this.sendImageToServer(_this.imgSrc);
|
||||
console.log(_this.imgSrc, "图片显示");
|
||||
|
||||
}, 5000); // 5000毫秒 = 5秒
|
||||
},
|
||||
// 创建一个新方法来停止拍照
|
||||
stopImageCapture() {
|
||||
if (this.intervalId) {
|
||||
this.$message({
|
||||
message: '停止识别',
|
||||
type: 'warning'
|
||||
});
|
||||
clearInterval(this.intervalId);
|
||||
console.log("停止拍照");
|
||||
}
|
||||
},
|
||||
//关闭摄像头并上传数据
|
||||
openFullScreen1() {
|
||||
this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
|
||||
|
||||
setTimeout(() => {
|
||||
// var file = this.imga.substr(22)
|
||||
this.imga = window.sessionStorage.getItem("img")
|
||||
var file = this.imga
|
||||
console.log(file);
|
||||
//base64数据放formData里面
|
||||
var formData = new FormData(); //*
|
||||
formData.append("multipartFile", file); //*
|
||||
// formData.append("password", this.ruleForm.password); //*
|
||||
// formData.append("username", this.ruleForm.name); //*
|
||||
console.log(formData, 'formData');
|
||||
//自己配置axios。
|
||||
// this.$http.post('url接口', formData).then(res => {
|
||||
// console.log(res);
|
||||
|
||||
// })
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCompetence();
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 设置背景图片
|
||||
.img_bg_camera {
|
||||
background-image: url(./image/back.png);
|
||||
background-size: 100% 100%;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contain {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div class="img_bg_camera">
|
||||
<!-- 透明度 -->
|
||||
<video id="videoCamera" autoplay hidden></video>
|
||||
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
|
||||
<div style="display: flex; justify-content: center; align-items: center; height: 102vh;">
|
||||
<el-card class="contain" style="display: flex; justify-content: center; align-items: center;">
|
||||
<p>标题</p>
|
||||
<el-card style="width: 1100px; height: 450px;">
|
||||
<!-- 返回的内容展示 -->
|
||||
<div style="height: 400px; overflow-y: auto;">
|
||||
<div style="display: flex; align-items: flex-start; justify-content: flex-start;">
|
||||
<el-tag style="font-size: 14px; font-weight: bold;">分析结果：</el-tag>
|
||||
</div>
|
||||
<div v-for="apiMessage in AiMessage" :key="apiMessage">
|
||||
<el-card style="margin: 10px;">
|
||||
<p>{{ apiMessage }}</p>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-button style="margin-top: 10px;" type="success" @click="setImage()">开启识别</el-button>
|
||||
<el-button style="margin-top: 10px;" type="warning" @click="stopImageCapture()">停止识别</el-button>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgif: false,
|
||||
videoWidth: 250,
|
||||
videoHeight: 250,
|
||||
imgSrc: '',
|
||||
thisCancas: null,
|
||||
thisContext: null,
|
||||
thisVideo: null,
|
||||
imga: '',
|
||||
intervalId: null,//
|
||||
AiMessage: [
|
||||
],
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCompetence() {
|
||||
this.thisCancas = document.getElementById('canvasCamera');
|
||||
this.thisContext = this.thisCancas.getContext('2d');
|
||||
this.thisVideo = document.getElementById('videoCamera');
|
||||
|
||||
// 简化对 navigator.mediaDevices 的支持检查
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
console.error('浏览器不支持 mediaDevices API');
|
||||
return;
|
||||
}
|
||||
|
||||
const constraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
width: this.videoWidth,
|
||||
height: this.videoHeight,
|
||||
transform: 'scaleX(-1)'
|
||||
}
|
||||
};
|
||||
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
|
||||
// 使用现代方式设置视频流
|
||||
this.thisVideo.srcObject = stream;
|
||||
this.thisVideo.onloadedmetadata = () => {
|
||||
this.thisVideo.play();
|
||||
};
|
||||
console.log("打开摄像头");
|
||||
}).catch(err => {
|
||||
console.error('获取媒体输入失败', err);
|
||||
});
|
||||
},
|
||||
// 绘制图片（拍照功能）
|
||||
sendImageToServer(imgData) {
|
||||
axios.post('http://124.71.135.249:8081/apiSend', {
|
||||
image: imgData
|
||||
}).then(response => {
|
||||
if (response.data.msg === "ok") {
|
||||
this.$message({
|
||||
message: '图像识别成功！',
|
||||
type: 'success'
|
||||
});
|
||||
console.log(response.data.choices[0].message.content, "返回的数据");
|
||||
this.AiMessage.push(response.data.choices[0].message.content)
|
||||
console.log(this.AiMessage);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('发送图片时出错', error);
|
||||
});
|
||||
},
|
||||
setImage() {
|
||||
console.log("开始拍照")
|
||||
this.$message({
|
||||
message: '开始识别',
|
||||
type: 'success'
|
||||
});
|
||||
this.imgif = true;
|
||||
var _this = this;
|
||||
// 如果已经有一个定时器在运行，先清除它
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
// 设置定时器，每五秒拍照一次
|
||||
this.intervalId = setInterval(function () {
|
||||
// 点击，canvas画图
|
||||
_this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250);
|
||||
console.log(_this.thisContext);
|
||||
|
||||
// 获取图片base64链接
|
||||
var image = _this.thisCancas.toDataURL('image/png');
|
||||
_this.imgSrc = image;
|
||||
window.sessionStorage.setItem("img", _this.imgSrc);
|
||||
_this.sendImageToServer(_this.imgSrc);
|
||||
console.log(_this.imgSrc, "图片显示");
|
||||
|
||||
}, 5000); // 5000毫秒 = 5秒
|
||||
},
|
||||
// 创建一个新方法来停止拍照
|
||||
stopImageCapture() {
|
||||
if (this.intervalId) {
|
||||
this.$message({
|
||||
message: '停止识别',
|
||||
type: 'warning'
|
||||
});
|
||||
clearInterval(this.intervalId);
|
||||
console.log("停止拍照");
|
||||
}
|
||||
},
|
||||
//关闭摄像头并上传数据
|
||||
openFullScreen1() {
|
||||
this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
|
||||
|
||||
setTimeout(() => {
|
||||
// var file = this.imga.substr(22)
|
||||
this.imga = window.sessionStorage.getItem("img")
|
||||
var file = this.imga
|
||||
console.log(file);
|
||||
//base64数据放formData里面
|
||||
var formData = new FormData(); //*
|
||||
formData.append("multipartFile", file); //*
|
||||
// formData.append("password", this.ruleForm.password); //*
|
||||
// formData.append("username", this.ruleForm.name); //*
|
||||
console.log(formData, 'formData');
|
||||
//自己配置axios。
|
||||
// this.$http.post('url接口', formData).then(res => {
|
||||
// console.log(res);
|
||||
|
||||
// })
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCompetence();
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 设置背景图片
|
||||
.img_bg_camera {
|
||||
background-image: url(../image/back.png);
|
||||
background-size: 100% 100%;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contain {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue