From 2db0c29fd2ebc0c0e443e4e5d35610b82a1faa4e Mon Sep 17 00:00:00 2001
From: xzg <4727863@qq.com>
Date: Mon, 1 Jul 2024 13:27:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=AD=BE=E6=94=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/webCameraIMG/webCamera.vue | 176 +++++++++++++++-------
 src/utils/webCamera/eloamWebCamera.js     |   5 +-
 2 files changed, 125 insertions(+), 56 deletions(-)

diff --git a/src/components/webCameraIMG/webCamera.vue b/src/components/webCameraIMG/webCamera.vue
index 85280172..685fdb7e 100644
--- a/src/components/webCameraIMG/webCamera.vue
+++ b/src/components/webCameraIMG/webCamera.vue
@@ -4,14 +4,8 @@
       <el-tab-pane label="拍摄">
         <div class="IMG_VIEW_container">
           <!-- 主摄像头 -->
-          <div class="IMG_VIEW1">
-            <img
-              id="IMG_VIEW1"
-              v-if="IMG_camera"
-              ref="IMG_VIEW"
-              src="../../../public/img/load.gif"
-              alt="主摄像头"
-            />
+          <div id="IMG_VIEW_Content" class="IMG_VIEW1">
+            <img id="IMG_VIEW1" ref="IMG_VIEW" src="http://127.0.0.1:38088/video=stream&camidx=0" alt="主摄像头" />
             <el-icon v-if="!IMG_startUp" @click="Devicerestart" class="SwitchButton"
               ><SwitchButton
             /></el-icon>
@@ -34,7 +28,11 @@
 
           <!-- 缩略图 -->
           <div id="suoluetu" ref="IMG_Thumbnail">
-            <el-empty style="margin: auto;" description="暂无缩略图" v-if="!IMG_suoluetuList.length" />
+            <el-empty
+              style="margin: auto"
+              description="暂无缩略图"
+              v-if="!IMG_suoluetuList.length"
+            />
             <template v-for="(item, index) in IMG_suoluetuList" :key="index">
               <el-image
                 ref="el => setImagePreviewRef(el, index)"
@@ -61,38 +59,47 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
-import axios from 'axios';
+import { reactive, ref, onMounted } from 'vue';
+// import axios_serve from '../../../src/axios_IMG.js';
 import { ElMessage } from 'element-plus';
+import IMG_error from '../../../public/img/loaderror.png'; //设备未连接
+import IMG_drive from '../../../public/img/driveerror.png'; //设备驱动未启动
+import IMG_load from '../../../public/img/load.gif'; //设备驱动未启动
+import Axios_IMG from '../../axiosimg.js';
 const IMG_camera = ref(false); // 摄像头状态
-const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; // 主摄像头地址
-const IMG_error = '../../../public/img/loaderror.png'; //设备未连接
-const IMG_drive = '../../../public/img/driveerror.png'; //设备驱动未启动
+// const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; 
+const IMG_URL = "http://127.0.0.1:38088/video=stream&camidx=0";// 主摄像头地址
+// const IMG_error = '../../../public/img/loaderror.png'; //设备未连接
+// const IMG_drive = '../../../public/img/driveerror.png'; //设备驱动未启动
 const IMG_VIEW = ref(null); // 主摄像头实例
 const IMG_Thumbnail = ref(null); // 缩略图实例
 const IMG_TITLE = ref('设备正在初始化中...');
 const IMG_suoluetuList = ref([]); // 示例图片列表
 const initialIndex = ref(0); // 初始显示的索引
 const imagePreviewRefs = ref([]);
+let IMG_API_SERVER = reactive(true); //true表示线上环境，false表示开发环境
 let IMG_Trimming_edge = ref(false); //图片裁边
 let IMG_startUp = ref(false); //摄像头是否启动
 let IMG_API = ref('/api/blade-resource/oss/endpoint/put-file');
 let zoom = ref(5); //图片缩放等级
-let IMGstate=ref(1);//是否清楚历史记录
+let IMGstate = ref(1); //是否清楚历史记录
 const $emit = defineEmits(['upload-success']);
 const props = defineProps({
-    IMGstate: {
-        type: Number,//参数类型
-        required: false,//是否必传
-        default: 1 //默认值;0,清除历史记录.1不清除
-    }
+  IMGstate: {
+    type: Number, //参数类型
+    required: false, //是否必传
+    default: 1, //默认值;0,清除历史记录.1不清除
+  },
 });
-watch(() => props.IMGstate, (newValue, oldValue) => {
-  if(newValue !=IMGstate.value){
-    IMGstate.value  = props.IMGstate
-   IMG_suoluetuList.value=[];//重置拍摄图片
+watch(
+  () => props.IMGstate,
+  (newValue, oldValue) => {
+    if (newValue != IMGstate.value) {
+      IMGstate.value = props.IMGstate;
+      IMG_suoluetuList.value = []; //重置拍摄图片
+    }
   }
-});
+);
 // 打印日志
 const mylog = val => {
   let element = document.getElementById('log');
@@ -100,6 +107,7 @@ const mylog = val => {
   let date = new Date().toString().slice(16, 24);
   element.innerHTML = date + '&nbsp;&nbsp;' + val + '<br>' + old_val;
 };
+
 // 设置每个 el-image 的引用
 const setImagePreviewRef = (el, index) => {
   if (el) {
@@ -116,11 +124,19 @@ const showPreview = async index => {
 };
 //判断设备是否连接
 const IsConnect = async () => {
+  IMG_startUp.value = true; //摄像头已启动
+  return true
   let timeoutMs = 6000; // 6秒
   let startTime = Date.now();
   while (Date.now() - startTime < timeoutMs) {
     try {
-      const response = await axios.post('/imgapi/device=isconnect', {}, { timeout: timeoutMs });
+      const response = await axios.post(
+        `${
+          IMG_API_SERVER ? 'http://127.0.0.1:38088/device=isconnect' : '/imgapi/device=isconnect'
+        }`,
+        {},
+        { timeout: timeoutMs }
+      );
       console.log(response.data, 'res');
 
       if (response.data.code === '0') {
@@ -153,8 +169,9 @@ const Opentrimming = () => {
 
 // 开启摄像头
 const Deviceinitialization = async () => {
-  IMG_camera.value = true; // 摄像头打开
-  let IMG_state = await IsConnect();
+  IMG_startUp.value = true; //摄像头已启动
+  return
+  // let IMG_state = await IsConnect();
   console.log(IMG_state, 'IMG_state');
   //检查设备驱动是否连接成功
   if (IMG_state == false) {
@@ -185,17 +202,16 @@ const Deviceinitialization = async () => {
 };
 // 页面初始化加载
 const onLoad = async () => {
- await Deviceinitialization(); //初始化设备
+  await Deviceinitialization(); //初始化设备
 };
-onLoad();
+onLoad()
 // 设备重启
-const Devicerestart=()=>{
+const Devicerestart = () => {
   IMG_camera.value = true; // 摄像头打开
   mylog('重启设备');
-  IMG_VIEW.value.src = '../../../public/img/load.gif'; // 主摄像头地址
+  IMG_VIEW.value.src = IMG_load; // 主摄像头地址
   Deviceinitialization(); //初始化设备
-}
-
+};
 
 // 图片缩放API
 const zoomAPI = attribute => {
@@ -204,7 +220,10 @@ const zoomAPI = attribute => {
     corp: JSON.stringify(zoom.value), // 放大比例，取值0~9，0：原图，9最大显示
   };
   axios
-    .post('/imgapi/stream=zoominout', JSON.stringify(data))
+    .post(
+      `${IMG_API_SERVER ? 'http://127.0.0.1:38088/stream=zoominout' : '/imgapi/stream=zoominout'}`,
+      JSON.stringify(data)
+    )
     .then(() => {})
     .catch(error => {
       console.error('请求出错', error);
@@ -242,7 +261,7 @@ const Turnoffcamera = () => {
     camidx: 0,
   };
   axios
-    .post('/imgapi/video=close', data)
+    .post(`${IMG_API_SERVER ? 'http://127.0.0.1:38088/video=close' : '/imgapi/video=close'}`, data)
     .then(() => {
       IMG_VIEW.value.src = ''; //关闭地址
       IMG_startUp.value = false; //摄像头已关闭
@@ -321,32 +340,81 @@ const IMG_add = img_base64 => {
 const Rotatingcamera = angle => {
   // angle:角度
   let data = { camidx: '0', rotate: String(angle) };
-  axios.post('/imgapi/video=rotate', JSON.stringify(data)).then(res => {
-    console.log(res);
-    mylog('旋转摄像头成功');
-  });
+  axios
+    .post(
+      `${IMG_API_SERVER ? 'http://127.0.0.1:38088/video=rotate' : '/imgapi/video=rotate'}`,
+      JSON.stringify(data)
+    )
+    .then(res => {
+      console.log(res);
+      mylog('旋转摄像头成功');
+    });
 };
 
 // 点击拍照
 let view1_scan = async () => {
   let data = {
-    filepath: 'base64', //图片保存地址，传参类型：["", "D:\\1.jpg", "base64"]
-    rotate: '0', // 图像旋转角度，90的整数倍，默认："0"
-    camidx: '0', // 摄像头索引，参数：0:主头；1:副头
-    ColorMode: '0', // 色彩模式，图片保存本地时调用。0：彩色 1：灰色 2：黑白 3：白纸印章 4：去背景色(普通文件) 5:去背景色(身份证)
-    deskew: IMG_Trimming_edge.value ? '1' : '0', //纠偏（主头有效），参数：0:不纠偏；1:纠偏(裁边)
-    bAutoAdjust: '0', // 是否自动摆正： 0：不摆正 1：摆正
-    quality: '2', //图片质量，图片保存本地调用。0:默认质量；1:高质量；2:较高质量；3:中质量；4:较低质量；5:低质量
-  };
-  axios.post('/imgapi/video=grabimage', JSON.stringify(data)).then(res => {
-    console.log(res, '图片地址');
-    // 注意: res.data.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
-    if (res.data.code !== '0') {
+    "filepath": "",
+    "rotate": "",
+    "deskew": "",
+    "deskewval": "",
+    "camidx": "0",
+    "ColorMode": "",
+    "quality": "1",
+    "bAutoAdjust": "",
+    "bIsPrint1to1": "",
+    "watermark": {
+        "pos": "",
+        "content": "",
+        "transparency": "",
+        "fontsize": "",
+        "font": "",
+        "color": ""
+    }
+};
+
+const xhr = new XMLHttpRequest();
+xhr.open('POST', 'http://127.0.0.1:38088/video=grabimage', true);
+// xhr.setRequestHeader('Content-Type', 'application/json');
+
+xhr.onload = function() {
+  if (xhr.status >= 200 && xhr.status < 300) {
+    const response = JSON.parse(xhr.responseText);
+    console.log(response, 'response');
+    console.log(response, '图片地址');
+    // 注意: res.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
+    if (response.code !== '0') {
       return ElMessage.error('拍摄失败请重新尝试');
     }
     ElMessage({ message: '拍摄成功', type: 'success' });
-    IMG_add(res.data.photoBase64); //添加略缩图上传
-  });
+    IMG_add(response.photoBase64); // 再次添加略缩图上传，确保上传
+  } else {
+    console.error('Error:', xhr.statusText);
+  }
+};
+
+xhr.onerror = function() {
+  console.error('Error:', xhr.statusText);
+};
+
+xhr.send(JSON.stringify(data));
+                        return
+
+Axios_IMG.post(
+      `${
+        IMG_API_SERVER ? 'http://127.0.0.1:38088/video=grabimage' : '/imgapi/video=grabimage'
+      }`,
+     data
+    )
+    .then(res => {
+      console.log(res, '图片地址');
+      // 注意: res.data.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
+      if (res.data.code !== '0') {
+        return ElMessage.error('拍摄失败请重新尝试');
+      }
+      ElMessage({ message: '拍摄成功', type: 'success' });
+      IMG_add(res.data.photoBase64); //添加略缩图上传
+    });
 };
 </script>
 
diff --git a/src/utils/webCamera/eloamWebCamera.js b/src/utils/webCamera/eloamWebCamera.js
index e3d987e6..d30b75ca 100644
--- a/src/utils/webCamera/eloamWebCamera.js
+++ b/src/utils/webCamera/eloamWebCamera.js
@@ -17,7 +17,7 @@ var __ELOAM_OBJ = {
     autoTakePhotosStatus: false
 }
 
-var WebCamera = function (_$, data, suc, fail) {
+ var WebCamera = function (_$, data, suc, fail) {
     // 初始化数额及
     if (!_$) {
         fail("jquery 不能为空")
@@ -857,4 +857,5 @@ var WebCamera = function (_$, data, suc, fail) {
 }
 
 // 使用vue 项目需要打开这个注释
-export default WebCamera
+
+export default WebCamera
\ No newline at end of file