使用Terrasect OCR如何提取图片中绿色高亮的数字936和385？

问题分析 #

绿色高亮的数字（936、385）无法被识别，核心原因是高亮颜色导致数字与背景的对比度不足，Tesseract的默认识别策略对这类低对比度或带颜色覆盖的文本支持有限。以下是针对性的解决步骤：

1. 图片预处理：增强高亮区域对比度 #

在OCR识别前，通过图像处理反转绿色高亮区域的像素，让黑色数字更突出。可使用Canvas实现前端预处理：

async function preprocessHighlightedImage(imgElement) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;

  ctx.drawImage(imgElement, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 遍历像素，识别绿色区域并反转颜色
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // 判断绿色高亮（g值显著高于r、b）
    if (g > r + 50 && g > b + 50) {
      data[i] = 255 - r;
      data[i + 1] = 255 - g;
      data[i + 2] = 255 - b;
    } else {
      // 普通区域灰度化，减少干扰
      const gray = 0.299 * r + 0.587 * g + 0.114 * b;
      data[i] = data[i + 1] = data[i + 2] = gray;
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL('image/png');
}

调用示例：

// 假设上传后的图片元素为#upload-img
const rawImg = document.querySelector('#upload-img');
const processedImgUrl = await preprocessHighlightedImage(rawImg);

// 用处理后的图片执行OCR
Tesseract.recognize(processedImgUrl, 'eng', {
  logger: m => console.log(m)
}).then(result => {
  console.log('识别结果：', result.data.text);
});

2. 调整Tesseract识别参数 #

通过配置页面分割模式（psm）和字符白名单，缩小识别范围，提升数字识别准确率：

Tesseract.recognize(imgUrl, 'eng', {
  tessedit_pageseg_mode: 6, // 强制按单一文本块识别
  tessedit_char_whitelist: '0123456789', // 仅识别数字
  logger: m => console.log(m)
}).then(result => {
  console.log('数字识别结果：', result.data.text);
});

3. 从data.html中提取高亮文本 #

若Tesseract已识别到高亮区域的布局信息，可解析data.html的DOM结构，提取绿色背景元素内的数字：

function getHighlightedNumbers(html) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  // 匹配绿色背景的元素（根据实际样式调整选择器）
  const greenElements = tempDiv.querySelectorAll('[style*="background-color: green"], [style*="background: #008000"]');
  const numbers = [];
  greenElements.forEach(el => {
    const text = el.textContent.trim();
    if (/^\d+$/.test(text)) { // 仅保留纯数字
      numbers.push(text);
    }
  });
  return numbers;
}

// 在你的result函数中调用
function result(data){
  var r = $(".result");
  console.log(data);
  const highlightedNumbers = getHighlightedNumbers(data.html);
  r.append(
    "<div class='sixteen wide column output'>success" +
    "<div class='ui message'><pre>完整文本：" + data.text +"</pre></div>" +
    "<div class='ui message'><pre>高亮数字：" + highlightedNumbers.join(', ') + "</pre></div>" +
    "</div>"
  );
}

内容的提问来源于stack exchange，提问作者Maximus Su