diff --git a/src/pages/devicesSearch/ocrSearch.vue b/src/pages/devicesSearch/ocrSearch.vue index c867cab..3bdf17c 100644 --- a/src/pages/devicesSearch/ocrSearch.vue +++ b/src/pages/devicesSearch/ocrSearch.vue @@ -445,7 +445,7 @@ export default { // 拍照前先进行聚焦 console.log('拍照前聚焦...'); console.log('开始拍照...'); - CameraPreview.takePicture({width:640, height:640, quality: 50}, async (base64PictureData) => { + CameraPreview.takePicture({width:640, height:540, quality: 50}, async (base64PictureData) => { console.log('拍照返回数据',base64PictureData); await this.processImage(base64PictureData); }); @@ -460,49 +460,136 @@ export default { } }, +// 修改后的方法 + removeExifData(pureBase64) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); + + // 转换为dataURL然后提取纯base64部分 + const dataUrl = canvas.toDataURL('image/jpeg', 0.8); + const cleanPureBase64 = dataUrl.split(',')[1]; // 去掉前缀 + resolve(cleanPureBase64); + }; + + img.onerror = () => reject(new Error('图像加载失败')); + + // 临时添加前缀用于加载 + img.src = `data:image/jpeg;base64,${pureBase64}`; + }); + }, + // 处理图片 - 使用ImageUtils async processImage(imageData) { this.isProcessing = true; try { + // base64PictureData 是纯base64（无前缀） + const cleanBase64 = await this.removeExifData(imageData); + // cleanBase64 也是纯base64（无前缀） + + console.log('清理后的纯base64:', cleanBase64); console.log('开始处理图片...'); - console.log("base64数据:", imageData[0]); console.log('图片处理完成，开始OCR识别...'); - const response = await new Promise((resolve, reject)=> - { - uni.request({ - url: '/material/app/ocr/getOcrCode', - method: 'POST', - data: { - image: imageData[0], - jiju_type: '', - auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' - }, - header: { - 'Content-Type': 'application/json', // 根据后端要求设置请求头，常见的 POST 请求数据格式为 JSON - }, - timeout: 30000, - success: resolve, - fail: reject - }); - } - ) - ; - if (response.data?.data?.result) { - this.queryCodeParams.maCode = response.data.data.result; - await this.closeCamera(); - this.getCode(); - uni.showToast({ - title: '识别成功', - icon: 'success' - }); - } else { - uni.showToast({ - title: '未识别到有效编码', - icon: 'none' - }); - } + uni.request({ + url: '/material/app/ocr/getOcrCode', + method: 'POST', + data: { + image: cleanBase64, + jiju_type: '', + auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' + }, + header: { + "Content-Type": "application/json;charset=UTF-8" + }, + success: async (res) => { + console.log("res", res); + const {data: resData} = res + if (resData.data.data.code===0){ + if (resData.data.data.result) { + this.queryCodeParams.maCode = resData.data.data.result + await this.closeCamera(); + await this.getCode(); + await uni.showToast({ + title: '识别成功', + icon: 'success' + }); + } else { + uni.showToast({ + title: '识别失败！' + resData.data.msg, + icon: 'none', + }) + } + } else { + uni.showToast({ + title: '识别失败！', + icon: 'none', + }) + } + }, + fail: (err) => { + uni.showToast({ + title: '请求失败：' + err.errMsg, + icon: 'none', + }) + }, + }) + + + // const response = await new Promise((resolve, reject)=> + // { + // uni.request({ + // url: '/material/app/ocr/getOcrCode', + // method: 'POST', + // data: { + // image: cleanBase64, + // jiju_type: '', + // auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' + // }, + // header: { + // "Content-Type": "application/json;charset=UTF-8" + // }, + // timeout: 30000, + // success: resolve, + // fail: reject + // }); + // } + // ); + // console.log("response",response); + // console.log("response.data",response.data); + // + // // 建议的解析逻辑 + // if (response.data?.code === 0) { + // const ocrData = response.data.data; + // if (ocrData?.result) { + // this.queryCodeParams.maCode = ocrData.result; + // await this.closeCamera(); + // this.getCode(); + // uni.showToast({ + // title: '识别成功', + // icon: 'success' + // }); + // } else { + // uni.showToast({ + // title: '未识别到有效编码', + // icon: 'none' + // }); + // } + // } else { + // // 处理HTTP或业务错误 + // const errorMsg = response.data?.msg || 'OCR识别失败'; + // uni.showToast({ + // title: errorMsg, + // icon: 'none' + // }); + // } } catch (error) { console.error('图片处理或OCR识别失败:', error); uni.showToast({ @@ -599,9 +686,8 @@ export default { fail: reject }); } - ) - ; - + ); + console.log("response",response.data); if (response.data?.data?.result) { this.queryCodeParams.maCode = response.data.data.result; await this.closeCamera(); @@ -788,11 +874,13 @@ export default { left: 0; right: 0; display: flex; + justify-content: space-around; /* 改为space-around使按钮分布更均匀 */ + align-items: center; width: 100%; - z-index: 3; /* 控制按钮在最高层 */ - pointer-events: auto; /* 启用点击事件 */ + padding: 0 60rpx; /* 添加左右内边距 */ + z-index: 3; + pointer-events: auto; } - .control-btn { width: 100rpx; height: 100rpx; @@ -802,6 +890,7 @@ export default { justify-content: center; align-items: center; border: 2rpx solid rgba(255, 255, 255, 0.3); + margin: 0 20rpx; /* 添加按钮间距 */ } .control-icon { @@ -820,6 +909,7 @@ export default { align-items: center; border: 6rpx solid rgba(255, 255, 255, 0.5); transition: all 0.2s ease; + margin: 0 20rpx; /* 添加按钮间距 */ } .photo-btn.taking { diff --git a/src/pages/devicesSearch/ocrSearch5.vue b/src/pages/devicesSearch/ocrSearch5.vue index 074f7c0..e819d9e 100644 --- a/src/pages/devicesSearch/ocrSearch5.vue +++ b/src/pages/devicesSearch/ocrSearch5.vue @@ -445,7 +445,7 @@ export default { // 拍照前先进行聚焦 console.log('拍照前聚焦...'); console.log('开始拍照...'); - CameraPreview.takePicture({width:640, height:640, quality: 50}, async (base64PictureData) => { + CameraPreview.takePicture({width:640, height:540, quality: 50}, async (base64PictureData) => { console.log('拍照返回数据',base64PictureData); await this.processImage(base64PictureData); }); @@ -460,12 +460,41 @@ export default { } }, +// 修改后的方法 + removeExifData(pureBase64) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); + + // 转换为dataURL然后提取纯base64部分 + const dataUrl = canvas.toDataURL('image/jpeg', 0.8); + const cleanPureBase64 = dataUrl.split(',')[1]; // 去掉前缀 + resolve(cleanPureBase64); + }; + + img.onerror = () => reject(new Error('图像加载失败')); + + // 临时添加前缀用于加载 + img.src = `data:image/jpeg;base64,${pureBase64}`; + }); + }, + // 处理图片 - 使用ImageUtils async processImage(imageData) { this.isProcessing = true; try { + // base64PictureData 是纯base64（无前缀） + const cleanBase64 = await this.removeExifData(imageData); + // cleanBase64 也是纯base64（无前缀） + + console.log('清理后的纯base64:', cleanBase64); console.log('开始处理图片...'); - console.log("base64数据:", imageData[0]); console.log('图片处理完成，开始OCR识别...'); const response = await new Promise((resolve, reject)=> @@ -474,10 +503,13 @@ export default { url: '/material/app/ocr/getOcrCode', method: 'POST', data: { - image: imageData[0], + image: cleanBase64, jiju_type: '', auth_lic: 'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=' }, + header: { + "Content-Type": "application/json;charset=UTF-8" + }, timeout: 30000, success: resolve, fail: reject @@ -486,17 +518,28 @@ export default { ) ; - if (response.data?.data?.result) { - this.queryCodeParams.maCode = response.data.data.result; - await this.closeCamera(); - this.getCode(); - uni.showToast({ - title: '识别成功', - icon: 'success' - }); + // 建议的解析逻辑 + if (response.data?.code === 0) { + const ocrData = response.data.data; + if (ocrData?.result) { + this.queryCodeParams.maCode = ocrData.result; + await this.closeCamera(); + this.getCode(); + uni.showToast({ + title: '识别成功', + icon: 'success' + }); + } else { + uni.showToast({ + title: '未识别到有效编码', + icon: 'none' + }); + } } else { + // 处理HTTP或业务错误 + const errorMsg = response.data?.msg || 'OCR识别失败'; uni.showToast({ - title: '未识别到有效编码', + title: errorMsg, icon: 'none' }); }