minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: ocr本地化

Browse Source
master
LCJ-MinYa 6 months ago
parent d6c53c9c77
commit 9cd8800f90
10 changed files with 1072 additions and 327 deletions
Show Stats Download Patch File Download Diff File

327
demoHtml/ocr.html
Unescape Escape View File

@ -1,327 +0,0 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>网络日志Header提取工具</title>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #333;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.upload-section {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
border-radius: 5px;
background-color: #f9f9f9;
}
.upload-section:hover {
border-color: #aaa;
}
#imagePreview {
max-width: 100%;
margin-top: 10px;
display: none;
}
.result-section {
margin-top: 20px;
}
.header-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
.header-label {
font-weight: bold;
min-width: 180px;
}
.header-value {
flex-grow: 1;
word-break: break-all;
padding: 0 10px;
}
.copy-btn {
background-color: #4caf50;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.copy-btn:hover {
background-color: #45a049;
}
.progress {
margin-top: 10px;
height: 20px;
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
display: none;
}
.progress-bar {
height: 100%;
background-color: #4caf50;
width: 0%;
transition: width 0.3s;
}
#statusText {
margin-top: 5px;
font-size: 14px;
color: #666;
}
.instructions {
background-color: #e7f3fe;
border-left: 6px solid #2196f3;
padding: 10px 15px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>网络日志Header提取工具</h1>
<div class="container">
<div class="instructions">
<h3>使用说明：</h3>
<p>1. 上传包含网络请求日志的图片（截图或照片）</p>
<p>2. 系统将自动识别图片中的文本</p>
<p>3. 从识别结果中提取以下Header值：</p>
<ul>
<li>bkatimestamp</li>
<li>bkatimestamptoke</li>
<li>brcpEaSessionTicket</li>
<li>brcpEaDeviceId</li>
</ul>
<p>4. 点击复制按钮可以复制对应的值</p>
</div>
<div
class="upload-section"
id="dropArea"
>
<p>拖放图片到这里，或点击选择图片</p>
<input
type="file"
id="fileInput"
accept="image/*"
style="display: none"
/>
<button onclick="document.getElementById('fileInput').click()">选择图片</button>
<img
id="imagePreview"
alt="预览图"
/>
</div>
<div
class="progress"
id="progressBar"
>
<div
class="progress-bar"
id="progressBarInner"
></div>
</div>
<div id="statusText"></div>
<div
class="result-section"
id="resultSection"
style="display: none"
>
<h2>提取结果</h2>
<div id="headerResults"></div>
</div>
</div>
<script>
//保证页面先加载完毕再执行下面代码
window.onload = function () {
// 全局变量
let imageFile = null;
// DOM元素
const fileInput = document.getElementById('fileInput');
const dropArea = document.getElementById('dropArea');
const imagePreview = document.getElementById('imagePreview');
const progressBar = document.getElementById('progressBar');
const progressBarInner = document.getElementById('progressBarInner');
const statusText = document.getElementById('statusText');
const resultSection = document.getElementById('resultSection');
const headerResults = document.getElementById('headerResults');
// 事件监听器
fileInput.addEventListener('change', handleFileSelect);
dropArea.addEventListener('dragover', handleDragOver);
dropArea.addEventListener('drop', handleDrop);
// 处理文件选择
function handleFileSelect(e) {
const file = e.target.files[0];
if (file && file.type.match('image.*')) {
processImageFile(file);
}
}
// 处理拖放
function handleDragOver(e) {
e.preventDefault();
e.stopPropagation();
dropArea.style.borderColor = '#4CAF50';
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
dropArea.style.borderColor = '#ccc';
const file = e.dataTransfer.files[0];
if (file && file.type.match('image.*')) {
processImageFile(file);
}
}
// 处理图片文件
function processImageFile(file) {
imageFile = file;
// 显示预览
const reader = new FileReader();
reader.onload = function (e) {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
};
reader.readAsDataURL(file);
// 开始OCR处理
performOCR(file);
}
// 执行OCR识别
function performOCR(imageFile) {
progressBar.style.display = 'block';
statusText.textContent = '正在识别图片中的文本...';
Tesseract.recognize(
imageFile,
'eng+chi_sim', // 使用英文和简体中文识别
{
logger: (m) => updateProgress(m),
}
)
.then(({ data: { text } }) => {
statusText.textContent = '识别完成，正在提取Header信息...';
extractHeaders(text);
})
.catch((err) => {
console.error(err);
statusText.textContent = '识别过程中出错: ' + err.message;
});
}
// 更新进度
function updateProgress(message) {
if (message.status === 'recognizing text') {
progressBarInner.style.width = `${message.progress * 100}%`;
}
if (message.status) {
statusText.textContent = `状态: ${message.status}`;
}
}
// 从文本中提取header信息
function extractHeaders(text) {
console.log('提取Header信息: ', text);
// 定义要提取的header键
const headerKeys = ['bkatimestamp', 'bkatimestamptoke', 'brcpEaSessionTicket', 'brcpEaDeviceId'];
// 初始化结果对象
const results = {};
headerKeys.forEach((key) => {
results[key] = '';
});
// 尝试从文本中提取每个header
headerKeys.forEach((key) => {
// 构造正则表达式，匹配header键和值
// 考虑到日志可能有多种格式，使用更灵活的正则
const regex = new RegExp(`${key}[\\s:=]+([^\\s\\n]+)`, 'i');
debugger;
const match = text.match(regex);
if (match && match[1]) {
results[key] = match[1].replace(/[",;]/g, ''); // 清理常见干扰字符
}
});
// 显示结果
displayResults(results);
}
// 显示提取结果
function displayResults(results) {
headerResults.innerHTML = '';
for (const [key, value] of Object.entries(results)) {
const itemDiv = document.createElement('div');
itemDiv.className = 'header-item';
const labelSpan = document.createElement('span');
labelSpan.className = 'header-label';
labelSpan.textContent = key;
const valueSpan = document.createElement('span');
valueSpan.className = 'header-value';
valueSpan.textContent = value || '未找到';
const copyBtn = document.createElement('button');
copyBtn.className = 'copy-btn';
copyBtn.textContent = '复制';
copyBtn.onclick = () => {
if (value) {
navigator.clipboard.writeText(value).then(() => {
copyBtn.textContent = '已复制!';
setTimeout(() => {
copyBtn.textContent = '复制';
}, 2000);
});
}
};
itemDiv.appendChild(labelSpan);
itemDiv.appendChild(valueSpan);
itemDiv.appendChild(copyBtn);
headerResults.appendChild(itemDiv);
}
resultSection.style.display = 'block';
statusText.textContent = '提取完成！';
}
};
</script>
</body>
</html>

BIN
demoHtml/ocr/js/tesseract-core-simd.wasm
View File

Binary file not shown.

285
demoHtml/ocr/js/tesseract-core-simd.wasm.js
View File

File diff suppressed because one or more lines are too long

BIN
demoHtml/ocr/js/tesseract-core.wasm
View File

Binary file not shown.

285
demoHtml/ocr/js/tesseract-core.wasm.js
View File

File diff suppressed because one or more lines are too long

3
demoHtml/ocr/js/tesseract.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
demoHtml/ocr/lang/chi_sim.traineddata
View File

Binary file not shown.

BIN
demoHtml/ocr/lang/eng.traineddata
View File

Binary file not shown.

496
demoHtml/ocr/ocr.html
Unescape Escape View File

@ -0,0 +1,496 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>完全本地化OCR识别工具</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.upload-section {
border: 2px dashed #7f8c8d;
padding: 30px;
text-align: center;
border-radius: 5px;
background-color: #f9f9f9;
transition: all 0.3s;
margin-bottom: 20px;
}
.upload-section:hover {
border-color: #3498db;
background-color: #f0f7fc;
}
#imagePreview {
max-width: 100%;
max-height: 300px;
margin-top: 15px;
display: none;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #2980b9;
}
.progress-container {
margin: 20px 0;
display: none;
}
.progress-bar {
height: 20px;
background-color: #ecf0f1;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #2ecc71;
width: 0%;
transition: width 0.3s;
}
#statusText {
margin-top: 8px;
font-size: 14px;
color: #7f8c8d;
text-align: center;
}
.result-section {
margin-top: 30px;
display: none;
}
.header-item {
display: flex;
align-items: center;
margin-bottom: 12px;
padding: 12px;
background-color: #f8f9fa;
border-radius: 4px;
border-left: 4px solid #3498db;
}
.header-label {
font-weight: bold;
min-width: 200px;
color: #2c3e50;
}
.header-value {
flex-grow: 1;
word-break: break-all;
padding: 0 15px;
font-family: monospace;
}
.copy-btn {
background-color: #27ae60;
color: white;
border: none;
padding: 6px 12px;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.copy-btn:hover {
background-color: #219653;
}
.copy-btn:active {
transform: scale(0.95);
}
#ocrTextResult {
white-space: pre-wrap;
background-color: #f8f9fa;
padding: 15px;
border-radius: 4px;
font-family: monospace;
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
.section-title {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 8px;
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>完全本地化OCR识别工具</h1>
<div
class="upload-section"
id="dropArea"
>
<p style="font-size: 18px; margin-bottom: 20px">拖放图片到此处或点击下方按钮选择</p>
<input
type="file"
id="fileInput"
accept="image/*"
style="display: none"
/>
<button
class="btn"
onclick="document.getElementById('fileInput').click()"
>
选择图片文件
</button>
<img
id="imagePreview"
alt="图片预览"
/>
</div>
<div
class="progress-container"
id="progressContainer"
>
<div class="progress-bar">
<div
class="progress-fill"
id="progressFill"
></div>
</div>
<div id="statusText">准备就绪</div>
</div>
<div
class="result-section"
id="resultSection"
>
<h2 class="section-title">OCR识别结果</h2>
<div id="ocrTextResult"></div>
<h2 class="section-title">提取的Header信息</h2>
<div id="headerResults"></div>
</div>
</div>
<!-- 本地化Tesseract.js库 -->
<script src="js/tesseract.min.js"></script>
<script>
// 初始化Tesseract配置
function initTesseract() {
// 检测SIMD支持
const simdSupported = (() => {
try {
return WebAssembly.validate(
new Uint8Array([
0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0, 253, 15, 253, 98, 11,
])
);
} catch (e) {
return false;
}
})();
console.log('SIMD支持:', simdSupported ? '是' : '否');
console.log(Tesseract);
// 配置Tesseract
window.Tesseract = Tesseract.create({
workerPath: 'worker/worker.min.js',
corePath: simdSupported ? 'js/tesseract-core-simd.wasm.js' : 'js/tesseract-core.wasm.js',
langPath: 'lang/',
workerBlobURL: false,
cacheMethod: 'indexedDB',
cachePath: 'tesseract-cache',
gzip: false,
logger: (m) => console.log(m),
});
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function () {
// initTesseract();
setupEventListeners();
});
// 设置事件监听器
function setupEventListeners() {
const fileInput = document.getElementById('fileInput');
const dropArea = document.getElementById('dropArea');
fileInput.addEventListener('change', handleFileSelect);
// 拖放相关事件
dropArea.addEventListener('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
this.style.borderColor = '#3498db';
this.style.backgroundColor = '#eaf2f8';
});
dropArea.addEventListener('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
this.style.borderColor = '#7f8c8d';
this.style.backgroundColor = '#f9f9f9';
});
dropArea.addEventListener('drop', function (e) {
e.preventDefault();
e.stopPropagation();
this.style.borderColor = '#7f8c8d';
this.style.backgroundColor = '#f9f9f9';
const file = e.dataTransfer.files[0];
if (file && file.type.match('image.*')) {
processImageFile(file);
}
});
}
// 处理文件选择
function handleFileSelect(e) {
const file = e.target.files[0];
if (file && file.type.match('image.*')) {
processImageFile(file);
}
}
// 处理图片文件
function processImageFile(file) {
// 显示预览
const reader = new FileReader();
reader.onload = function (e) {
const preview = document.getElementById('imagePreview');
preview.src = e.target.result;
preview.style.display = 'block';
};
reader.readAsDataURL(file);
// 开始OCR处理
performOCR(file);
}
// 执行OCR识别
async function performOCR(imageFile) {
const progressContainer = document.getElementById('progressContainer');
const progressFill = document.getElementById('progressFill');
const statusText = document.getElementById('statusText');
const resultSection = document.getElementById('resultSection');
const ocrTextResult = document.getElementById('ocrTextResult');
const headerResults = document.getElementById('headerResults');
// 重置UI
progressContainer.style.display = 'block';
progressFill.style.width = '0%';
statusText.textContent = '正在初始化OCR引擎...';
resultSection.style.display = 'none';
headerResults.innerHTML = '';
try {
// 创建worker
const worker = await Tesseract.createWorker({
workerPath: 'worker/worker.min.js',
corePath: 'js/tesseract-core-simd.wasm.js',
langPath: 'lang/',
workerBlobURL: false,
cacheMethod: 'indexedDB',
cachePath: 'tesseract-cache',
gzip: false,
logger: (m) => updateProgress(m),
});
// 加载语言
await worker.loadLanguage('chi_sim+eng');
await worker.initialize('chi_sim+eng');
// 执行OCR识别
const result = await worker.recognize(imageFile);
// 显示结果
ocrTextResult.textContent = result.data.text;
resultSection.style.display = 'block';
// 提取header信息
const headers = extractHeadersFromOCR(result.data.text);
displayHeaders(headers);
statusText.textContent = '识别完成!';
progressFill.style.width = '100%';
// 清理worker
await worker.terminate();
} catch (error) {
console.error('OCR处理错误:', error);
statusText.textContent = `识别失败: ${error.message}`;
progressFill.style.backgroundColor = '#e74c3c';
}
}
// 更新进度
function updateProgress(message) {
const progressFill = document.getElementById('progressFill');
const statusText = document.getElementById('statusText');
if (message.status === 'recognizing text') {
progressFill.style.width = `${message.progress * 100}%`;
}
if (message.status) {
let statusMessage = message.status;
if (message.progress) {
statusMessage += ` (${Math.round(message.progress * 100)}%)`;
}
statusText.textContent = statusMessage;
}
}
// 从OCR文本中提取header信息
function extractHeadersFromOCR(text) {
// 定义要提取的header键及其可能的OCR识别变体
const headerKeys = {
bkatimestamp: ['bkatimestamp', 'bkatimestarnp', 'bkatirnestamp'],
bkatimestamptoken: ['bkatimestamptoken', 'pkatimestamptoken', 'bkatimestamptoke'],
brcpEaSessionTicket: ['brcpEaSessionTicket', 'brepEaSessionTicket', 'brcpEaSessionTiket'],
brcpEaDeviceId: ['brcpEaDeviceId', 'brcpEaDeviceld', 'brcpEaDeviceid'],
};
// 初始化结果对象
const results = {};
Object.keys(headerKeys).forEach((key) => {
results[key] = '';
});
// 预处理文本：合并换行、替换常见OCR错误
const preprocessedText = text
.replace(/\r?\n|\r/g, ' ') // 替换所有换行为空格
.replace(/\s+/g, ' ') // 合并多个空格为一个
.replace(/[“”]/g, '"') // 统一引号
.replace(/[‘’]/g, "'")
.replace(/l(?=[a-zA-Z])/g, 'I') // 修复"I"被识别为"l"的问题
.replace(/%/g, 'a') // 修复"a"被识别为"%"的问题
.replace(/[¢€]/g, 'c'); // 修复"c"被识别为特殊字符的问题
// 对每个header键进行匹配
for (const [correctKey, possibleVariants] of Object.entries(headerKeys)) {
for (const variant of possibleVariants) {
if (results[correctKey]) break; // 如果已经找到，跳过
// 构造更灵活的正则表达式
const regex = new RegExp(
`(${variant})` + // 键名
`\\s*[:=]\\s*` + // 分隔符(:或=)，前后可能有空格
`["']?` + // 可能的值引号
`([^"'\s\\],;}{]+)` + // 值部分(直到遇到引号、空格或各种分隔符)
`["']?`, // 可能的值引号
'i' // 不区分大小写
);
const match = preprocessedText.match(regex);
if (match && match[2]) {
// 清理提取的值
let value = match[2]
.replace(/^["']|["']$/g, '') // 去除首尾引号
.replace(/\s/g, '') // 去除内部空格
.replace(/[^\w-]/g, ''); // 只保留字母数字、下划线和连字符
// 基本格式验证
if (validateHeaderValue(correctKey, value)) {
results[correctKey] = value;
}
}
}
}
return results;
}
// 验证提取的header值是否符合预期格式
function validateHeaderValue(key, value) {
if (!value) return false;
switch (key) {
case 'bkatimestamp':
// 时间戳通常是13位数字
return /^\d{13}$/.test(value);
case 'bkatimestamptoken':
// token通常是较长的字母数字组合
return value.length > 30 && /^[a-fA-F0-9]+$/.test(value);
case 'brcpEaSessionTicket':
// ticket通常以字母开头，包含字母数字
return /^[a-zA-Z][a-zA-Z0-9]+$/.test(value);
case 'brcpEaDeviceId':
// deviceId通常是字母数字组合
return /^[a-fA-F0-9]+$/.test(value);
default:
return true;
}
}
// 显示提取的header信息
function displayHeaders(headers) {
const headerResults = document.getElementById('headerResults');
headerResults.innerHTML = '';
for (const [key, value] of Object.entries(headers)) {
const itemDiv = document.createElement('div');
itemDiv.className = 'header-item';
const labelSpan = document.createElement('span');
labelSpan.className = 'header-label';
labelSpan.textContent = key;
const valueSpan = document.createElement('span');
valueSpan.className = 'header-value';
valueSpan.textContent = value || '未识别到该字段';
const copyBtn = document.createElement('button');
copyBtn.className = 'copy-btn';
copyBtn.textContent = '复制';
copyBtn.onclick = () => {
if (value) {
navigator.clipboard
.writeText(value)
.then(() => {
copyBtn.textContent = '已复制!';
setTimeout(() => {
copyBtn.textContent = '复制';
}, 2000);
})
.catch((err) => {
console.error('复制失败:', err);
copyBtn.textContent = '复制失败';
});
}
};
itemDiv.appendChild(labelSpan);
itemDiv.appendChild(valueSpan);
itemDiv.appendChild(copyBtn);
headerResults.appendChild(itemDiv);
}
}
</script>
</body>
</html>

3
demoHtml/ocr/worker/worker.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save