|
|
|
|
@ -3,17 +3,35 @@
|
|
|
|
|
<el-tabs type="border-card"> |
|
|
|
|
<el-tab-pane label="拍摄"> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" @click="Deviceinitialization">启动摄像头</el-button> |
|
|
|
|
<el-button type="primary" @click="Turnoffcamera">关闭摄像头</el-button> |
|
|
|
|
<el-button type="primary" @click="view1_scan">点击拍摄</el-button> |
|
|
|
|
<el-button type="primary" @click="Rotatingcamera(90)">旋转摄像头</el-button> |
|
|
|
|
<el-button type="primary" @click="Enlargeimage">放大图片</el-button> |
|
|
|
|
<el-button type="primary" @click="Reduceimage">缩小图像</el-button> |
|
|
|
|
<!-- <el-button type="primary" @click="Opentrimming" :disabled="!IMG_startUp">{{ |
|
|
|
|
IMG_Trimming_edge ? '关闭裁边' : '开启裁边' |
|
|
|
|
}}</el-button> --> |
|
|
|
|
<!-- <el-button type="primary" @click="view1_scan" :disabled="!IMG_startUp" |
|
|
|
|
>点击拍摄</el-button |
|
|
|
|
> --> |
|
|
|
|
</div> |
|
|
|
|
<div class="IMG_VIEW_container"> |
|
|
|
|
<!-- 主摄像头 --> |
|
|
|
|
<div class="IMG_VIEW1"> |
|
|
|
|
<img id="IMG_VIEW1" v-if="IMG_camera" ref="IMG_VIEW" src="#" alt="主摄像头" /> |
|
|
|
|
<img id="IMG_VIEW1" v-if="IMG_camera" ref="IMG_VIEW" src="../../../public/img/load.gif" alt="主摄像头" /> |
|
|
|
|
<!-- <el-icon v-if="!IMG_startUp" @click="Deviceinitialization" class="SwitchButton" |
|
|
|
|
><SwitchButton |
|
|
|
|
/></el-icon> --> |
|
|
|
|
<div class="el_icon" v-if="IMG_startUp"> |
|
|
|
|
<el-tooltip effect="dark" :content="IMG_Trimming_edge ? '关闭裁边' : '开启裁边'"> |
|
|
|
|
<el-icon |
|
|
|
|
:style="{ color: IMG_Trimming_edge ? 'red' : '#fff' }" |
|
|
|
|
@click="Opentrimming" |
|
|
|
|
><Crop |
|
|
|
|
/></el-icon> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<el-tooltip effect="dark" content="点击拍摄"> |
|
|
|
|
<el-icon @click="view1_scan"><CameraFilled /></el-icon> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<el-tooltip effect="dark" content="旋转摄像头"> |
|
|
|
|
<el-icon @click="Rotatingcamera(90)"><RefreshRight /></el-icon> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 缩略图 --> |
|
|
|
|
@ -36,18 +54,59 @@ const IMG_camera = ref(false); // 摄像头状态
|
|
|
|
|
const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; // 主摄像头地址 |
|
|
|
|
const IMG_VIEW = ref(null); // 主摄像头实例 |
|
|
|
|
const IMG_Thumbnail = ref(null); // 缩略图实例 |
|
|
|
|
let IMG_API = reactive('/api/blade-resource/oss/endpoint/put-file'); |
|
|
|
|
let zoom = reactive(5); //图片缩放等级 |
|
|
|
|
const IMG_TITLE=ref('设备正在初始化中...') |
|
|
|
|
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); //图片缩放等级 |
|
|
|
|
const $emit = defineEmits(['upload-success']); |
|
|
|
|
|
|
|
|
|
// 获取设备状态 |
|
|
|
|
const Getdevicestatus = () => {}; |
|
|
|
|
//(开启/关闭)图像裁边 |
|
|
|
|
const Opentrimming = () => { |
|
|
|
|
IMG_Trimming_edge.value = !IMG_Trimming_edge.value; |
|
|
|
|
if (IMG_Trimming_edge.value) { |
|
|
|
|
ElMessage({ message: '图像裁边已开启', type: 'success' }); |
|
|
|
|
mylog('图像裁边已开启'); |
|
|
|
|
} else { |
|
|
|
|
ElMessage({ message: '图像裁边已关闭', type: 'success' }); |
|
|
|
|
mylog('图像裁边已关闭'); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 框选图片 |
|
|
|
|
const FrameSelectImage = () => { |
|
|
|
|
let data = { |
|
|
|
|
filepath: '', // 是否保存本地，可选a，为空不保存本地，否则按路径保存 |
|
|
|
|
left: 0, |
|
|
|
|
top: 0, |
|
|
|
|
right: 100, |
|
|
|
|
bottom: 100, |
|
|
|
|
}; |
|
|
|
|
axios.post('/imgapi/select=imagearea', JSON.stringify(data)).then(res => { |
|
|
|
|
console.log(res, '框选图片'); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
// 开启摄像头 |
|
|
|
|
const Deviceinitialization = () => { |
|
|
|
|
IMG_camera.value = true; // 摄像头打开 |
|
|
|
|
// 这里需要判断设备是否在线 |
|
|
|
|
let TIME_IMG_VIEW = setTimeout(() => { |
|
|
|
|
if (IMG_VIEW.value) { |
|
|
|
|
IMG_startUp.value = true; //摄像头已启动 |
|
|
|
|
IMG_VIEW.value.src = IMG_URL; // 主摄像头地址 |
|
|
|
|
IMG_TITLE.value='' |
|
|
|
|
ElMessage({ message: '摄像头已启动', type: 'success' }); |
|
|
|
|
mylog('摄像头已启动'); |
|
|
|
|
} |
|
|
|
|
clearTimeout(TIME_IMG_VIEW); |
|
|
|
|
}, 50); |
|
|
|
|
}, 2000); |
|
|
|
|
}; |
|
|
|
|
// 页面初始化加载 |
|
|
|
|
const onLoad=()=>{ |
|
|
|
|
Deviceinitialization();//初始化设备 |
|
|
|
|
} |
|
|
|
|
onLoad() |
|
|
|
|
// 打印日志 |
|
|
|
|
const mylog = val => { |
|
|
|
|
let element = document.getElementById('log'); |
|
|
|
|
@ -57,17 +116,14 @@ const mylog = val => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 图片缩放API |
|
|
|
|
const zoomAPI = () => { |
|
|
|
|
const zoomAPI = attribute => { |
|
|
|
|
let data = { |
|
|
|
|
action: '0', |
|
|
|
|
corp: zoom, |
|
|
|
|
camidx: '0', // 摄像头，0:主头；1:副头 |
|
|
|
|
corp: JSON.stringify(zoom.value), // 放大比例，取值0~9，0：原图，9最大显示 |
|
|
|
|
}; |
|
|
|
|
axios |
|
|
|
|
.post('/imgapi/stream=zoominout', data) |
|
|
|
|
.then(() => { |
|
|
|
|
IMG_camera.value = false; // 摄像头打开 |
|
|
|
|
Deviceinitialization() |
|
|
|
|
}) |
|
|
|
|
.post('/imgapi/stream=zoominout', JSON.stringify(data)) |
|
|
|
|
.then(() => {}) |
|
|
|
|
.catch(error => { |
|
|
|
|
console.error('请求出错', error); |
|
|
|
|
}); |
|
|
|
|
@ -75,26 +131,26 @@ const zoomAPI = () => {
|
|
|
|
|
|
|
|
|
|
// 放大图片 |
|
|
|
|
const Enlargeimage = () => { |
|
|
|
|
if (zoom == 9) { |
|
|
|
|
if (zoom.value == 9) { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: '已经最大了', |
|
|
|
|
type: 'warning', |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
zoom += 1; |
|
|
|
|
zoom.value += 1; |
|
|
|
|
zoomAPI(); |
|
|
|
|
}; |
|
|
|
|
// 缩小图片 |
|
|
|
|
const Reduceimage = () => { |
|
|
|
|
if (zoom == 0) { |
|
|
|
|
if (zoom.value == 0) { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: '已经最小了', |
|
|
|
|
type: 'warning', |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
zoom -= 1; |
|
|
|
|
zoom.value -= 1; |
|
|
|
|
zoomAPI(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -106,9 +162,10 @@ const Turnoffcamera = () => {
|
|
|
|
|
axios |
|
|
|
|
.post('/imgapi/video=close', data) |
|
|
|
|
.then(() => { |
|
|
|
|
if (IMG_VIEW.value) { |
|
|
|
|
IMG_VIEW.value.src = ''; |
|
|
|
|
} |
|
|
|
|
IMG_VIEW.value.src = ''; //关闭地址 |
|
|
|
|
IMG_startUp.value = false; //摄像头已关闭 |
|
|
|
|
ElMessage({ message: '摄像头已关闭', type: 'success' }); |
|
|
|
|
mylog('摄像头已关闭'); |
|
|
|
|
IMG_camera.value = false; // 关闭节点 |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
@ -133,17 +190,32 @@ const base64ToBlob = (base64, mime) => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 上传图片函数 |
|
|
|
|
const Upload_Images = blob => { |
|
|
|
|
const Upload_Images = file => { |
|
|
|
|
// 创建一个FormData对象 |
|
|
|
|
const formData = new FormData(); |
|
|
|
|
formData.append('file', blob); |
|
|
|
|
|
|
|
|
|
// 确保文件具有正确的文件名和类型 |
|
|
|
|
const filename = file.name || 'image.jpg'; // 默认文件名 |
|
|
|
|
const filetype = file.type || 'image/jpeg'; // 默认文件类型 |
|
|
|
|
|
|
|
|
|
// 使用File对象确保文件流具有正确的文件名和类型 |
|
|
|
|
const fileBlob = new Blob([file], { type: filetype }); |
|
|
|
|
const fileWithMetadata = new File([fileBlob], filename, { type: filetype }); |
|
|
|
|
|
|
|
|
|
// 将文件附加到FormData对象中 |
|
|
|
|
formData.append('file', fileWithMetadata); |
|
|
|
|
|
|
|
|
|
// 使用axios发送POST请求 |
|
|
|
|
axios |
|
|
|
|
.post(IMG_API, formData, { |
|
|
|
|
.post(IMG_API.value, formData, { |
|
|
|
|
headers: { |
|
|
|
|
'Content-Type': 'multipart/form-data', |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
.then(res => { |
|
|
|
|
console.log(res, '图片上传成功'); |
|
|
|
|
// 触发上传成功事件 |
|
|
|
|
$emit('upload-success', res); |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
console.error('上传失败', error); |
|
|
|
|
@ -165,10 +237,11 @@ const IMG_add = img_base64 => {
|
|
|
|
|
mylog('添加缩略图成功'); |
|
|
|
|
} |
|
|
|
|
console.log(img, 'img'); |
|
|
|
|
// Upload_Images(blob);//上传图片接口 |
|
|
|
|
Upload_Images(blob); //上传图片接口 |
|
|
|
|
|
|
|
|
|
console.log(url, 'blob'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 旋转摄像头 |
|
|
|
|
const Rotatingcamera = angle => { |
|
|
|
|
// angle:角度 |
|
|
|
|
@ -178,15 +251,17 @@ const Rotatingcamera = angle => {
|
|
|
|
|
mylog('旋转摄像头成功'); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 点击拍照 |
|
|
|
|
let view1_scan = () => { |
|
|
|
|
let view1_scan = async () => { |
|
|
|
|
let data = { |
|
|
|
|
filepath: 'base64', |
|
|
|
|
rotate: '0', |
|
|
|
|
cutpage: '0', |
|
|
|
|
camidx: '0', |
|
|
|
|
ColorMode: '0', |
|
|
|
|
quality: '3', |
|
|
|
|
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, '图片地址'); |
|
|
|
|
@ -195,7 +270,7 @@ let view1_scan = () => {
|
|
|
|
|
return ElMessage.error('拍摄失败请重新尝试'); |
|
|
|
|
} |
|
|
|
|
ElMessage({ message: '拍摄成功', type: 'success' }); |
|
|
|
|
IMG_add(res.data.photoBase64); |
|
|
|
|
IMG_add(res.data.photoBase64); //添加略缩图上传 |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -226,10 +301,43 @@ let view1_scan = () => {
|
|
|
|
|
width: 60%; |
|
|
|
|
height: 300px; |
|
|
|
|
border: 1px solid red; |
|
|
|
|
position: relative; |
|
|
|
|
background-color: #000; |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.el_icon { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 10px; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.el_icon { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
.el_icon i { |
|
|
|
|
margin: 0 10px; |
|
|
|
|
} |
|
|
|
|
.el_icon i:active { |
|
|
|
|
color: #2196f3; |
|
|
|
|
} |
|
|
|
|
.SwitchButton { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.SwitchButton:active { |
|
|
|
|
color: #2196f3; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 缩略图 */ |
|
|
|
|
#suoluetu { |
|
|
|
|
|
