bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

问题修改

This commit is contained in:
hayu 2025-08-05 16:57:39 +08:00
parent 8a4b884483
commit e2046edff2
2 changed files with 108 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/devicesSearch/ocrSearch.nvue → src/pages/devicesSearch/ocrSearch.vue
View File

@ -442,44 +442,13 @@ export default {
if (!CameraPreview) { if (!CameraPreview) {
throw new Error('相机插件不可用'); throw new Error('相机插件不可用');
} }
// 拍照前先进行聚焦 // 拍照前先进行聚焦
console.log('拍照前聚焦...'); console.log('拍照前聚焦...');
console.log('开始拍照...'); console.log('开始拍照...');
CameraPreview.takePicture({width:640, height:640, quality: 85}, function(base64PictureData) { CameraPreview.takePicture({width:640, height:640, quality: 50}, async (base64PictureData) => {
console.log('拍照返回数据',base64PictureData);
// One simple example is if you are going to use it inside an HTML img src attribute then you would do the following: await this.processImage(base64PictureData);
// imageSrcData = 'data:image/jpeg;base64,' + base64PictureData;
// $('img#my-img').attr('src', imageSrcData);
this.processImage(base64PictureData);
}); });
// const imageData = await new Promise((resolve, reject)=>
// {
// const options = {
// quality: 85,
// targetHeight: 1920,
// targetWidth: 1080
// };
//
// CameraPreview.takePicture(
// options,
// (imageData) => {
// console.log('拍照成功');
// resolve(imageData);
// },
// (error) => {
// console.error('拍照失败:', error);
// reject(new Error(`拍照失败: ${error}`));
// }
// );
// }
// )
// ;
// await this.processImage(imageData);
} catch (error) { } catch (error) {
console.error('拍照过程出错:', error); console.error('拍照过程出错:', error);
uni.showToast({ uni.showToast({
@ -496,14 +465,7 @@ export default {
this.isProcessing = true; this.isProcessing = true;
try { try {
console.log('开始处理图片...'); console.log('开始处理图片...');
console.log("拍照返回的数据:", imageData); console.log("base64数据:", imageData[0]);
// 使用ImageUtils处理图片
// const processedBase64 = await ImageUtils.processImage(imageData[0], {
// maxWidth: 1024,
// maxHeight: 1024,
// quality: 0.5,
// outputFormat: 'base64'
// });
console.log('图片处理完成，开始OCR识别...'); console.log('图片处理完成，开始OCR识别...');
const response = await new Promise((resolve, reject)=> const response = await new Promise((resolve, reject)=>
@ -512,7 +474,7 @@ export default {
url: '/material/app/ocr/getOcrCode', url: '/material/app/ocr/getOcrCode',
method: 'POST', method: 'POST',
data: { data: {
image: imageData, image: imageData[0],
jiju_type: '', jiju_type: '',
auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
}, },

253
src/pages/devicesSearch/ocrSearch5.vue
View File

@ -76,36 +76,43 @@
</view> </view>
</view> </view>
<!-- 相机预览页面 - 修改为固定全屏 -->
<!-- 相机预览页面 --> <!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-wrapper"> <view v-if="showCamera" class="camera-container">
<!-- 相机预览容器 - 单独放置 --> <!-- 顶部提示 -->
<view class="camera-preview-container"></view> <view class="top-tip">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container">
</view>
<!-- UI控制层 - 独立于相机预览 --> <!-- 底部控制区 -->
<view class="camera-ui-layer"> <view class="bottom-controls">
<!-- 底部控制区 --> <view class="control-btn" @click="closeCamera">
<view class="bottom-controls"> <text class="control-icon">✕</text>
<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>
<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 v-if="isProcessing" class="loading-overlay">
<view class="loading-content"> <view class="loading-content">
<view class="loading-spinner"></view> <view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text> <text class="loading-text">正在识别中...</text>
</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 隐藏的canvas用于图片处理 -->
<canvas
canvas-id="imageCanvas"
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
></canvas>
</view> </view>
</template> </template>
@ -301,7 +308,7 @@ export default {
} }
// 获取整个相机包装器的尺寸 // 获取整个相机包装器的尺寸
const cameraWrapper = document.querySelector('.camera-wrapper'); const cameraWrapper = document.querySelector('.viewfinder-container');
if (!cameraWrapper) { if (!cameraWrapper) {
reject(new Error('找不到相机容器')); reject(new Error('找不到相机容器'));
return; return;
@ -435,35 +442,13 @@ export default {
if (!CameraPreview) { if (!CameraPreview) {
throw new Error('相机插件不可用'); throw new Error('相机插件不可用');
} }
// 拍照前先进行聚焦 // 拍照前先进行聚焦
console.log('拍照前聚焦...'); console.log('拍照前聚焦...');
await this.performFocusBeforeCapture();
console.log('开始拍照...'); console.log('开始拍照...');
const imageData = await new Promise((resolve, reject) => { CameraPreview.takePicture({width:640, height:640, quality: 50}, async (base64PictureData) => {
const options = { console.log('拍照返回数据',base64PictureData);
quality: 85, await this.processImage(base64PictureData);
targetHeight: 1920, });
targetWidth: 1080
};
CameraPreview.takePicture(
options,
(imageData) => {
console.log('拍照成功');
resolve(imageData);
},
(error) => {
console.error('拍照失败:', error);
reject(new Error(`拍照失败: ${error}`));
}
);
}
)
;
await this.processImage(imageData);
} catch (error) { } catch (error) {
console.error('拍照过程出错:', error); console.error('拍照过程出错:', error);
uni.showToast({ uni.showToast({
@ -475,71 +460,21 @@ export default {
} }
}, },
// 拍照前聚焦
async performFocusBeforeCapture() {
const CameraPreview = this.getCameraPlugin();
if (!CameraPreview || typeof CameraPreview.setFocus !== 'function') {
console.log('相机插件不支持聚焦，直接拍照');
return;
}
try {
this.isFocusing = true;
console.log('拍照前执行聚焦...');
await new Promise((resolve, reject) => {
// 设置聚焦超时
const focusTimeout = setTimeout(() => {
console.log('拍照前聚焦超时，继续拍照');
this.isFocusing = false;
resolve();
}, 2000); // 拍照前聚焦时间稍短
CameraPreview.setFocus(
(result) => {
console.log('拍照前聚焦成功:', result);
clearTimeout(focusTimeout);
this.isFocusing = false;
// 聚焦成功后稍等一下再拍照，确保聚焦稳定
setTimeout(resolve, 200);
},
(error) => {
console.error('拍照前聚焦失败:', error);
clearTimeout(focusTimeout);
this.isFocusing = false;
resolve(); // 即使聚焦失败也继续拍照
}
);
}
)
;
} catch (error) {
console.error('拍照前聚焦过程出错:', error);
this.isFocusing = false;
}
},
// 处理图片 - 使用ImageUtils // 处理图片 - 使用ImageUtils
async processImage(imageData) { async processImage(imageData) {
this.isProcessing = true; this.isProcessing = true;
try { try {
console.log('开始处理图片...'); console.log('开始处理图片...');
// 使用ImageUtils处理图片 console.log("base64数据:", imageData[0]);
const processedBase64 = await ImageUtils.processImage(imageData, {
maxWidth: 1024,
maxHeight: 1024,
quality: 50,
outputFormat: 'base64'
});
console.log('图片处理完成，开始OCR识别...'); console.log('图片处理完成，开始OCR识别...');
const response = await new Promise((resolve, reject) => { const response = await new Promise((resolve, reject)=>
{
uni.request({ uni.request({
url: '/material/app/ocr/getOcrCode', url: '/material/app/ocr/getOcrCode',
method: 'POST', method: 'POST',
data: { data: {
image: processedBase64, image: imageData[0],
jiju_type: '', jiju_type: '',
auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4='
}, },
@ -575,15 +510,31 @@ export default {
this.isProcessing = false; this.isProcessing = false;
} }
}, },
// 打开相册
// 打开相册
openGallery() { openGallery() {
uni.chooseImage({ uni.chooseImage({
count: 1, count: 1,
sourceType: ['album'], sourceType: ['album'],
success: (res) => { success: (res) => {
if (res.tempFilePaths && res.tempFilePaths.length > 0) { if (res.tempFilePaths && res.tempFilePaths.length > 0) {
this.convertImageToBase64(res.tempFilePaths[0]); const filePath = res.tempFilePaths[0];
// 统一使用XMLHttpRequest处理
const xhr = new XMLHttpRequest();
xhr.open('GET', filePath, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const reader = new FileReader();
reader.onload = (e) => {
const base64 = e.target.result.split(',')[1];
this.convertImageToBase64(base64);
};
reader.readAsDataURL(blob);
}
};
xhr.send();
} }
}, },
fail: (error) => { fail: (error) => {
@ -595,22 +546,43 @@ 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 - 使用ImageUtils处理
async convertImageToBase64(filePath) { async convertImageToBase64(processedBase64) {
this.isProcessing = true; this.isProcessing = true;
try { try {
console.log('开始处理相册图片...'); console.log('开始处理相册图片...');
console.log('相册base64数据', processedBase64);
// 使用ImageUtils处理相册图片 // 使用ImageUtils处理相册图片
const processedBase64 = await ImageUtils.processImage(filePath, { // const processedBase64 = await ImageUtils.processImage(filePath, {
maxWidth: 1024, // maxWidth: 1024,
maxHeight: 1024, // maxHeight: 1024,
quality: 50, // quality: 50,
outputFormat: 'base64' // outputFormat: 'base64'
}); // });
console.log('相册图片处理完成，开始OCR识别...'); console.log('相册图片处理完成，开始OCR识别...');
const response = await new Promise((resolve, reject) => { const response = await new Promise((resolve, reject)=>
{
uni.request({ uni.request({
url: '/material/app/ocr/getOcrCode', url: '/material/app/ocr/getOcrCode',
method: 'POST', method: 'POST',
@ -662,7 +634,8 @@ export default {
return; return;
} }
try { try {
const response = await new Promise((resolve, reject) => { const response = await new Promise((resolve, reject)=>
{
uni.request({ uni.request({
url: '/material/ma_machine/getHisByCode', url: '/material/ma_machine/getHisByCode',
method: 'GET', method: 'GET',
@ -701,7 +674,8 @@ export default {
async changeTag() { async changeTag() {
if (!this.queryCodeParams.maId) return; if (!this.queryCodeParams.maId) return;
try { try {
const response = await new Promise((resolve, reject) => { const response = await new Promise((resolve, reject)=>
{
uni.request({ uni.request({
url: '/material/ma_machine/getHisByCode', url: '/material/ma_machine/getHisByCode',
method: 'GET', method: 'GET',
@ -736,7 +710,6 @@ export default {
if (this.cameraStarted) { if (this.cameraStarted) {
const CameraPreview = this.getCameraPlugin(); const CameraPreview = this.getCameraPlugin();
if (CameraPreview) { if (CameraPreview) {
CameraPreview.setOnView(null); // 解除元素绑定
CameraPreview.stopCamera(); CameraPreview.stopCamera();
} }
this.cameraStarted = false; this.cameraStarted = false;
@ -765,36 +738,6 @@ export default {
</script> </script>
<style> <style>
/* 新增相机包装器样式 */
.camera-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: 10000; /* 基础层级 */
}
/* 相机预览容器 - 无内容，仅用于定位 */
.camera-preview-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 较低层级 */
}
/* UI控制层 - 显示在相机之上 */
.camera-ui-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2; /* 高于相机预览 */
pointer-events: none; /* 允许点击穿透到相机 */
}
.page-container { .page-container {
display: flex; display: flex;
@ -837,10 +780,11 @@ export default {
/* 控制按钮区域 - 需要单独设置可点击 */ /* 控制按钮区域 - 需要单独设置可点击 */
.bottom-controls { .bottom-controls {
/* 原有样式保持不变 */
position: absolute; position: absolute;
bottom: 0; bottom: 100rpx;
left: 0; left: 0;
right: 0;
display: flex;
width: 100%; width: 100%;
z-index: 3; /* 控制按钮在最高层 */ z-index: 3; /* 控制按钮在最高层 */
pointer-events: auto; /* 启用点击事件 */ pointer-events: auto; /* 启用点击事件 */
@ -945,4 +889,13 @@ export default {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
.viewfinder-container {
position: absolute;
width: 100%;
height: 40%;
margin-top: 150px;
z-index: 10001; /* 提高取景框层级 */
}
</style> </style>