Image processing with ionic1 (apk) versus Chrome (debugger) using ocrad.js

I've developed an application which captures the image and processes it to extract some data. Here is the image:

When I'm running the code in Chrome debugger, I clearly receive the desired text

Lot # 170814

But when I'm running the same code as Android application, I receive some gibberish.

Common functions:

function OCRImage(image) {   var canvas = document.createElement('canvas')   canvas.width = image.naturalWidth;   canvas.height = image.naturalHeight;   canvas.getContext('2d').drawImage(image, 0, 0)   return OCRAD(canvas) }  function OCRPath(url, callback) {   var image = new Image()   image.src = url;   image.onload = function () {     callback(OCRImage(image))   } } 

JS code for Chrome:

 OCRPath('img.png', function (words) {     alert(words)   }) 

JS code for Android:

  var options = {     quality: 100,     destinationType: Camera.DestinationType.FILE_URI,     sourceType: Camera.PictureSourceType.PHOTOLIBRARY,     encodingType: Camera.EncodingType.PNG,     mediaType: Camera.MediaType.PICTURE,     allowEdit: true,     correctOrientation: true   }       $cordovaCamera.getPicture(options)         .then(           function (imageURI) {             OCRPath('img.png',               function (words) {                 alert(words)               })},               function (err) {                 alert('Error');               });       } 

What can be the difference? It's literally the same image and same image processing code. Any suggestions? May be, any other way to make OCR?

1 Answers

Answers 1

literally the same image and same image processing code

It isn't - in the web you're loading 'img.png' into an <img>, then on load copying that into a <canvas> that you then pass to OCRAD.

On Android you're calling $cordovaCamera.getPicture(options) first to get a promise that resolves with imageURI once the user has selected an image.

Once you have that you ignore imageURI and load 'img.png' directly instead.

The results have accessed the image, but may have a scaled or otherwise lower resolution version - for instance Lot # 170814 becomes _l # 1 TO81, but FISSURE DIAMOND seems to be found in the larger title text ok.

Possible solutions:

Switch to base-64 encoded image using destinationType : Camera.DestinationType.DATA_URL

var options = {     quality: 100,     destinationType: Camera.DestinationType.DATA_URL,     sourceType: Camera.PictureSourceType.PHOTOLIBRARY,     encodingType: Camera.EncodingType.PNG,     mediaType: Camera.MediaType.PICTURE,     allowEdit: true,     correctOrientation: true }       $cordovaCamera.getPicture(options)     .then(          function (imageURI) {              OCRPath(imageURI, alert, alert);          }); 

Alternatively you shouldn't need the slightly roundabout approach to load the <img> then put that into a <canvas> - the only reason you're doing that is to get the bytes of the image to OCRAD. It's the best way to do that on the web, but on Android you already have the file - you should be able to pass it directly to OCRAD.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati