|
|
@@ -0,0 +1,142 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" style="width:200px" class="mt20" @click="openCamara">
|
|
|
+ {{placeholder}}
|
|
|
+ </el-button>
|
|
|
+ <el-dialog :visible.sync="openCamaraDialog" :close-on-click-modal="false" width="600px">
|
|
|
+ <!--canvas截取流-->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <video ref="video" v-show="isnotbtn" width="240" height="180" autoplay></video>
|
|
|
+ <div style="mt20" class="tc">
|
|
|
+ <el-button size="medium" type="primary" @click="photograph">采集</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <canvas ref="canvas" v-show="isnotbtn" width="240" height="180"></canvas>
|
|
|
+ <div style="mt20" class="tc">
|
|
|
+ <el-button size="medium" type="primary" @click="useImage">使用图片</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <div style="mt20" class="tc">
|
|
|
+ <el-button size="medium" type="primary" @click="closeCamera">关闭页面</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ httpServer
|
|
|
+ } from "@/components/httpServer/httpServer.js";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ openCamaraDialog: false,
|
|
|
+ isnotbtn: false,
|
|
|
+ isnotcanvas: false,
|
|
|
+ imageBase64: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['placeholder', 'width'],
|
|
|
+ mounted() {
|
|
|
+ console.log("mounted")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openCamara() {
|
|
|
+ this.openCamaraDialog = true;
|
|
|
+ this.callCamera()
|
|
|
+ },
|
|
|
+ // 调用摄像头
|
|
|
+ callCamera() {
|
|
|
+ // H5调用电脑摄像头API
|
|
|
+ navigator.mediaDevices
|
|
|
+ .getUserMedia({
|
|
|
+ video: true,
|
|
|
+ })
|
|
|
+ .then((success) => {
|
|
|
+ this.isnotbtn = true
|
|
|
+ // 摄像头开启成功
|
|
|
+ this.$refs["video"].srcObject = success;
|
|
|
+ // 实时拍照效果
|
|
|
+ this.$refs["video"].play();
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$message.error(
|
|
|
+ "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
|
|
|
+ );
|
|
|
+ console.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 拍照
|
|
|
+ photograph() {
|
|
|
+ let ctx = this.$refs["canvas"].getContext("2d");
|
|
|
+ // 把当前视频帧内容渲染到canvas上
|
|
|
+ ctx.drawImage(this.$refs["video"], 0, 0, 640, 480);
|
|
|
+ // 转base64格式、图片格式转换、图片质量压缩
|
|
|
+ let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
|
|
|
+ this.imageBase64 = imgBase64.replace("data:image/jpeg;base64,", "");
|
|
|
+ // let str = imgBase64.replace("data:image/jpeg;base64,", "");
|
|
|
+ // let strLength = str.length;
|
|
|
+ // let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸 用于判断
|
|
|
+ // let size = (fileLength / 1024).toFixed(2);
|
|
|
+ // console.log(size); // 上传拍照信息 调用接口上传图片 .........
|
|
|
+
|
|
|
+ // 保存到本地
|
|
|
+ // this.dialogCamera = false;
|
|
|
+ // let ADOM = document.createElement("a");
|
|
|
+ // ADOM.href = imgBase64 ;
|
|
|
+ // ADOM.download = new Date().getTime() + ".jpeg";
|
|
|
+ // ADOM.click();
|
|
|
+ },
|
|
|
+ useImage() {
|
|
|
+ let param = {
|
|
|
+ image: this.imageBase64
|
|
|
+ }
|
|
|
+ httpServer("user.addFeatureImg", param).then(res => {
|
|
|
+ this.$emit("onFinish", res.data.url);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 关闭摄像头
|
|
|
+ closeCamera() {
|
|
|
+ this.openCamaraDialog = false;
|
|
|
+ if (!this.$refs["video"].srcObject) {
|
|
|
+ this.dialogCamera = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let stream = this.$refs["video"].srcObject;
|
|
|
+ let tracks = stream.getTracks();
|
|
|
+ tracks.forEach((track) => {
|
|
|
+ track.stop();
|
|
|
+ });
|
|
|
+ this.$refs["video"].srcObject = null;
|
|
|
+ this.isnotbtn = false
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ .imagbtn {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .querybtn {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin: auto 0;
|
|
|
+ border-radius: 15px;
|
|
|
+ /* font-size:30px; */
|
|
|
+ }
|
|
|
+</style>
|
