Question

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

最初，我试图找到一个API，该API可以接受彩票的条形码，并在该彩票是否为中奖彩票时返回。在网上进行大量研究之后，我意识到这种方法是不可能的，因此现在我正尝试使用字符识别方法来检测数字和绘制日期。有了这些信息，我便将其与中奖号码和抽奖日期进行交叉引用。这里的好处是所需的字符为黑色，其他所有字符均具有不同的颜色。我尝试使用this逻辑，但是我难以操纵代码以适应我的目的。

image of a lottery ticket

所需的代码将输出“首次抽奖：”日期和所播放的6个数字（在A06：右侧）。

我实际得到的是以下内容：

“否” LO 0 “ Wm” { 3153：»-.：、.4， LDTTU PLUS，。;：7N9“ ??? 毫秒：10 20 24 25 32 3.7 总计：R5 ’00。 7’ HC？ ‘E： IWHW 753：” 19/15 / 0FE：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']);
    });
}

预先感谢您提供有效的解决方案。我只需要有人协助我将红色和白色背景像素化，以便可以轻松识别前景。我对这里的两行感兴趣：抽奖日期，显示为第一次抽奖：星期六19/07/20 和 A06：10 20 24 25 32 37

Answer 1

好吧...好吧，我给了它一个机会。

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

（您可能需要在整页中将其打开，大声笑）

有一个好：）

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识别乐透彩票上的日期和数字？

1 个答案: