ocr页面

This commit is contained in:
hayu 2025-08-14 17:21:25 +08:00
parent 9db1d27321
commit a11db57ff0
4 changed files with 139 additions and 191 deletions

View File

@ -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',

View File

@ -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>

View File

@ -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>

View File

@ -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>