如何使用 tesseract.js 识别乐透彩票上的日期和号码？

Question

我的应用程序尝试识别开奖日期和彩票中的号码。但是，由于机票背景上的图像，我无法检测到日期和号码。我如何修改我的代码才能实现我的目标？

最初我试图找到一个 API 可以接受彩票条形码和 return 是否是中奖彩票。在对网络进行广泛研究后，我开始意识到这种方法是不可能的，所以现在我正在尝试使用字符识别方法来检测数字和开奖日期。有了这些信息，我就会将它与中奖号码和开奖日期进行交叉引用。这里的好处是所需的字符是黑色的，而其他所有字符都有不同的颜色。我尝试使用 this 逻辑，但我很难操纵代码来满足我的目的。

所需的代码将输出 "First Draw:" 日期和播放的 6 个号码（在 A06: 的右侧）。

我实际得到的是：

“没有” 0 “Wm“{ 3153:» -.: , .4, LDTTU PLUS,.;: 7N9"??? 女士：10 20 24 25 32 3.7 总计：R5 ‘00。 7‘ 慧聪？ ‘E： IWHW 753：“ 15/0/19 FE:4¢;1- 071094555258an94

//function I use to run OCR
function runOCR(url) {
  Tesseract.recognize(url)
    .then(function(result) {
      console.log(result.text);
    }).progress(function(result) {
      console.log('Status: ' + result['status']);
    });
}

提前感谢您提供有效的解决方案。我只需要有人帮我把红色和白色背景像素化，这样前景就很容易辨认了。我对这里的两行感兴趣：开奖日期，上面写着 First Draw: Saterday 20/07/19 and A06: 10 20 24 25 32 37

Answer 1

太棒了...我试了一下。

我先将图像转换为灰度图像，然后检查该值是高于还是低于阈值。只需上传图像并移动滑块即可更改阈值。

（而且你可能需要整页打开它 lol）

玩得开心 :)

const fileReader      = document.getElementById('fileReader');
const sliderThreshold = document.getElementById('sliderThreshold');
const inputCanvas     = document.getElementById('inputCanvas');
const outputCanvas    = document.getElementById('outputCanvas');
const inputCtx        = inputCanvas.getContext('2d');
const outputCtx       = outputCanvas.getContext('2d');


sliderThreshold.addEventListener('input', e => displayResult(e.target.value));


fileReader.addEventListener('change', inputEvent => {
  let reader = new FileReader();
  reader.addEventListener('load', readerEvent => {
    let img = new Image();
    img.addEventListener('load', () => {
      inputCanvas.width  = img.width;
      inputCanvas.height = img.height;
      inputCtx.drawImage(img, 0, 0);

      displayResult(50);
    });
    img.src = readerEvent.target.result;
  });
  reader.readAsDataURL(inputEvent.target.files[0]);
});



function displayResult(threshold) {
  let imageData = inputCtx.getImageData(0,0, inputCanvas.width, inputCanvas.height);
  let data = imageData.data;

  for(let i = 0; i < data.length; i += 4) {
    // Convert RGB values to grayscale (you can look that up)
    let grayscale = data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11;

    // Check if the value is obove or below the threshold value and return white or black
    let finalColor = grayscale < threshold ? 0 : 255;

    // Asign the color
    data[i]     = finalColor;
    data[i + 1] = finalColor;
    data[i + 2] = finalColor;
  }

  // Put the data into another canvas so we 
  outputCanvas.width = imageData.width;
  outputCanvas.height = imageData.height;
  outputCtx.putImageData(imageData, 0, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .canvasContainer {
      overflow-y: scroll;
      display: inline-block;
    }
  </style>
</head>
<body>
  <input type="file" id="fileReader">
  Threshold<input type="range" min="0" max="255" id="sliderThreshold">


  <div class="canvasContainer">
    <canvas id="outputCanvas"></canvas>
  </div>
  <div class="canvasContainer">
    <canvas id="inputCanvas"></canvas>
  </div>



  <script src="./index.js"></script>
</body>
</html>

如何使用 tesseract.js 识别乐透彩票上的日期和号码？

How to use tesseract.js to recognize a date and numbers on a lotto ticket?

javascript

ocr

jquery

image-recognition