ocr页面
This commit is contained in:
parent
9db1d27321
commit
a11db57ff0
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-container" v-show="!showCamera">
|
||||
<!-- 设备搜索页面 -->
|
||||
<view v-if="!showCamera">
|
||||
<view class="table-list-item">
|
||||
|
|
@ -102,38 +102,6 @@
|
|||
</view>
|
||||
|
||||
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container">
|
||||
</view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐藏的canvas用于图片处理 -->
|
||||
<canvas
|
||||
canvas-id="imageCanvas"
|
||||
|
|
@ -144,10 +112,40 @@
|
|||
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
|
||||
</div>
|
||||
</view>
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container">
|
||||
</view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImageUtils from "../../services/utils/imageUtils";
|
||||
import {decryptWithSM4} from "../../utils/sm";
|
||||
import {getDeviceListAPI} from "../../services/picking/outbound";
|
||||
import ElectronicSeal from '@/components/ElectronicSeal/index.vue'
|
||||
|
|
@ -393,9 +391,7 @@ export default {
|
|||
tapFocus: true,
|
||||
disableExifHeaderStripping: false
|
||||
};
|
||||
|
||||
console.log('相机配置:', options);
|
||||
|
||||
CameraPreview.startCamera(
|
||||
options,
|
||||
(result) => {
|
||||
|
|
@ -411,18 +407,6 @@ export default {
|
|||
);
|
||||
});
|
||||
},
|
||||
|
||||
// 处理覆盖层点击事件
|
||||
handleOverlayClick(event) {
|
||||
// 计算点击位置相对于相机的坐标
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const x = event.touches[0].clientX - rect.left;
|
||||
const y = event.touches[0].clientY - rect.top;
|
||||
|
||||
// 调用聚焦功能
|
||||
this.tapToFocus(x, y);
|
||||
},
|
||||
|
||||
// 点击聚焦
|
||||
tapToFocus(x, y) {
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
|
|
@ -550,7 +534,7 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
// 处理图片 - 使用ImageUtils
|
||||
// 处理图片
|
||||
async processImage(imageData) {
|
||||
this.isProcessing = true;
|
||||
try {
|
||||
|
|
@ -559,8 +543,7 @@ export default {
|
|||
// cleanBase64 也是纯base64(无前缀)
|
||||
|
||||
console.log('清理后的纯base64:', cleanBase64);
|
||||
console.log('开始处理图片...');
|
||||
console.log('图片处理完成,开始OCR识别...');
|
||||
console.log('开始OCR识别...');
|
||||
|
||||
uni.request({
|
||||
url: '/material/app/ocr/getOcrCode',
|
||||
|
|
@ -579,14 +562,7 @@ export default {
|
|||
} else {
|
||||
res =res.data
|
||||
}
|
||||
console.log("res", res);
|
||||
console.log("res.data",res.data)
|
||||
const {data: resData} = res
|
||||
console.log("resData",resData)
|
||||
console.log("resData.data",resData.data)
|
||||
console.log("resData.code",resData.code)
|
||||
console.log("resData.data.result",resData.data.result)
|
||||
|
||||
if (resData.code===0){
|
||||
if (resData.data.result) {
|
||||
this.queryCodeParams.maCode = resData.data.result
|
||||
|
|
@ -662,40 +638,12 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// // 打开相册
|
||||
// openGallery() {
|
||||
// uni.chooseImage({
|
||||
// count: 1,
|
||||
// sourceType: ['album'],
|
||||
// success: (res) => {
|
||||
// if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||||
// this.convertImageToBase64(res.tempFilePaths[0]);
|
||||
// }
|
||||
// },
|
||||
// fail: (error) => {
|
||||
// console.error('选择图片失败:', error);
|
||||
// uni.showToast({
|
||||
// title: '选择图片失败',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
// 将图片转换为base64 - 使用ImageUtils处理
|
||||
// 将图片转换为base64
|
||||
async convertImageToBase64(processedBase64) {
|
||||
this.isProcessing = true;
|
||||
try {
|
||||
console.log('开始处理相册图片...');
|
||||
console.log('相册base64数据', processedBase64);
|
||||
// 使用ImageUtils处理相册图片
|
||||
// const processedBase64 = await ImageUtils.processImage(filePath, {
|
||||
// maxWidth: 1024,
|
||||
// maxHeight: 1024,
|
||||
// quality: 50,
|
||||
// outputFormat: 'base64'
|
||||
// });
|
||||
console.log('相册图片处理完成,开始OCR识别...');
|
||||
console.log('开始OCR识别...');
|
||||
|
||||
uni.request({
|
||||
url: '/material/app/ocr/getOcrCode',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-container" v-show="!showCamera">
|
||||
<!-- 设备搜索页面 -->
|
||||
<view v-if="!showCamera">
|
||||
<view class="table-list-item">
|
||||
|
|
@ -102,38 +102,6 @@
|
|||
</view>
|
||||
|
||||
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container">
|
||||
</view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐藏的canvas用于图片处理 -->
|
||||
<canvas
|
||||
canvas-id="imageCanvas"
|
||||
|
|
@ -144,6 +112,37 @@
|
|||
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="codeData.devType" />
|
||||
</div>
|
||||
</view>
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container">
|
||||
</view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-container" v-show="!showCamera">
|
||||
<!-- 设备搜索页面 -->
|
||||
<view v-if="!showCamera">
|
||||
<view class="table-list-item">
|
||||
|
|
@ -60,40 +60,6 @@
|
|||
<button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
|
||||
</view>
|
||||
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container"> </view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view
|
||||
class="photo-btn"
|
||||
@click="takePicture"
|
||||
:class="{ taking: isTaking, disabled: isFocusing }"
|
||||
>
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐藏的canvas用于图片处理 -->
|
||||
<canvas
|
||||
|
|
@ -101,6 +67,40 @@
|
|||
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
|
||||
></canvas>
|
||||
</view>
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container"> </view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view
|
||||
class="photo-btn"
|
||||
@click="takePicture"
|
||||
:class="{ taking: isTaking, disabled: isFocusing }"
|
||||
>
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-container" v-show="!showCamera">
|
||||
<!-- 设备搜索页面 -->
|
||||
<view v-if="!showCamera">
|
||||
<view class="table-list-item">
|
||||
|
|
@ -65,40 +65,6 @@
|
|||
<button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
|
||||
</view>
|
||||
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container"> </view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view
|
||||
class="photo-btn"
|
||||
@click="takePicture"
|
||||
:class="{ taking: isTaking, disabled: isFocusing }"
|
||||
>
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐藏的canvas用于图片处理 -->
|
||||
<canvas
|
||||
|
|
@ -106,6 +72,41 @@
|
|||
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
|
||||
></canvas>
|
||||
</view>
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<!-- 顶部提示 -->
|
||||
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
|
||||
<text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
|
||||
</view>
|
||||
<!-- 取景框 -->
|
||||
<view class="viewfinder-container"> </view>
|
||||
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
<text class="control-icon">✕</text>
|
||||
</view>
|
||||
<view
|
||||
class="photo-btn"
|
||||
@click="takePicture"
|
||||
:class="{ taking: isTaking, disabled: isFocusing }"
|
||||
>
|
||||
<view class="photo-btn-inner"></view>
|
||||
</view>
|
||||
<view class="control-btn" @click="openGallery">
|
||||
<text class="control-icon">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="isProcessing" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">正在识别中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue