CODEWITHSUNDEEP
javascriptjqueryocrimage-recognition
Clint Theron
Clint Theron

Reputation: 59

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

My app attempts to recognize the draw date and played numbers on a lottery ticket. However, I'm not able to detect the date nor the numbers because of the images on the background of the ticket. How do I modify my code to be able to achieve my goal?

Initially I tried to find an API that would accept the bar code of the lottery ticket and return if the ticket is a winning ticket or not. After extensive research on the web I came to realize that such an approach is not possible so now I'm attempting to use character recognition methods to detect the numbers and draw date. With this information I will then cross reference it against the winning numbers and draw date. The upside here is that the desired characters is in black and everything else have a different color. I tried to use this logic but I struggled to manipulate the code to suite my purpose.

image of a lottery ticket

The desired code would output the "First Draw:" date and the 6 numbers played (to the right of A06:).

What I actually got is the following:

“no“ LO 0 “Wm“{ 3153:» -.: , .4, LDTTU PLUS,.;: 7N9"??? ms: 10 20 24 25 32 3.7 Total :R5 ‘00 . 7‘ hc? ‘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']);
    });
}

Thanks in advance for an effective solution. I just need someone to assist me in pixel out the red and white background so that the foreground becomes easily recognizable. I'm interested in two lines here: The draw date, which read First Draw: Saterday 20/07/19 and A06: 10 20 24 25 32 37

Upvotes: 3

Views: 2505

Answers (1)

Elias
Elias

Reputation: 4141

Sooo... Well I gave it a shot.

I first convert the image to a grayscale image and then check if the value is above or below the threshold. Just upload the image and move the slider to change the threshold value.

(And you probably need to open it in full page lol)

Have a good one :)

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>

Upvotes: 3

Related Questions