Tesseract.js produces nonsense on mobile devices

Question

See this very simple example (can be tested at http://codepen.io/anon/pen/xRXEmM). The input takes in an image, and pressing "Start" will start the OCR, and once done, show the result.

<input type="file" id="input">
<button type="button" onclick="start()">Start</button>
<div>Result:</div>
<div id="result"></div>

<script src="https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js"></script>

<script type="text/javascript">
  var start = function() {
    var input = document.getElementById('input')
    imgFile = input.files[0]

    Tesseract.recognize(imgFile)
      .progress(function(pro) {
        console.log(pro);
      })
      .then(function(res) {
        console.log(res);
        document.getElementById("result").innerHTML = res.text;
      });
  };
</script>

Now, when I run this from my laptop (macOS), the result is as expected. But when I run this from an iOS or Android device, Chrome or Safari or whichever browser on the mobile devices, I get complete nonsense as a result. From the iOS simulator it works fine as well, but not from real devices.

E.g. a source picture being the text "some text" in Helvetica on a white blank background:

Result from a Mac:

text: "some text↵↵"

Result from iOS 10 Safari:

text: "................... . .. ......... . .............…222232222222212:2:2921EE2!9!9Quays-gunu-un-«unh↵↵"

I believe the code above is very similar, though minimal, but still the demo on their website works on both desktop and mobile devices: http://tesseract.projectnaptha.com/

Suggestions?

Tesseract.js produces nonsense on mobile devices

0 Answers0