Data retrival from Image

Retrieving data from an image as you describe is generally done using OCR. Since you mention the image is being uploaded anyway, this means that the pixel data is being sent to the backend and I recommend implementing OCR here.

Consider a toolkit like LEADTOOLS (https://www.leadtools.com/sdk/ocr) which contains OCR classes that you can implement as a service to make OCR available to your Angular application. (Disclaimer: I am an employee of this toolkit’s vendor).

As an example, the code for recognizing a particular area of an image and return the recognized text would look as follows:

using (WebClient client = new WebClient())
client.DownloadFile(uri, tempFile);
using (RasterCodecs codecs = new RasterCodecs())
{
using (IOcrEngine ocrEngine = ServiceHelper.CreateOCREngine(codecs))
{
RasterImage rasterImage = codecs.Load(tempFile, pageNumber);
using (IOcrPage ocrPage = ocrEngine.CreatePage(rasterImage, OcrImageSharingMode.AutoDispose))
{
var bounds = LeadRect.FromLTRB(left, top, right, bottom);
ImageResizer resizer = new ImageResizer(ocrPage.Width, ocrPage.Height, imageWidth, imageHeight);
if (resizer.IsNeeded)
bounds = resizer.ToImage(bounds);
OcrZone zone = new OcrZone();
zone.ZoneType = OcrZoneType.Text;
zone.Bounds = bounds;
ocrPage.Zones.Add(zone);
}
ocrPage.Recognize(null);
string text = ocrPage.GetText(-1);
}
return text;
}
}
}

Alternatively, you can implement this in a service on the frontend by putting the OCR components in a setup package to be installed at the client side. But in this case, your front-end will not be a thin client.

There is a third option which you can consider, which is to take advantage of the OCR Cloud Web API from LEADTOOLS:

https://services.leadtools.com/features/ocr

This way the OCR occurs on the cloud and the results can be made available on either end.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Hussam Barouqa7y ago
Retrieving data from an image as you describe is generally done using OCR. Since you mention the image is being uploaded anyway, this means that the pixel data is being sent to the backend and I recommend implementing OCR here.
Consider a toolkit like LEADTOOLS (https://www.leadtools.com/sdk/ocr) which contains OCR classes that you can implement as a service to make OCR available to your Angular application. (Disclaimer: I am an employee of this toolkit’s vendor).
As an example, the code for recognizing a particular area of an image and return the recognized text would look as follows:
using (WebClient client = new WebClient())
   client.DownloadFile(uri, tempFile);

using (RasterCodecs codecs = new RasterCodecs())
{
   using (IOcrEngine ocrEngine = ServiceHelper.CreateOCREngine(codecs))
   {
      RasterImage rasterImage = codecs.Load(tempFile, pageNumber);
      using (IOcrPage ocrPage = ocrEngine.CreatePage(rasterImage, OcrImageSharingMode.AutoDispose))
      {
            var bounds = LeadRect.FromLTRB(left, top, right, bottom);
            ImageResizer resizer = new ImageResizer(ocrPage.Width, ocrPage.Height, imageWidth, imageHeight);
            if (resizer.IsNeeded)
               bounds = resizer.ToImage(bounds);

            OcrZone zone = new OcrZone();
            zone.ZoneType = OcrZoneType.Text;
            zone.Bounds = bounds;
            ocrPage.Zones.Add(zone);
         }
         ocrPage.Recognize(null);
         string text = ocrPage.GetText(-1);
         }
         return text;
      }
   }
}
Alternatively, you can implement this in a service on the frontend by putting the OCR components in a setup package to be installed at the client side. But in this case, your front-end will not be a thin client.
There is a third option which you can consider, which is to take advantage of the OCR Cloud Web API from LEADTOOLS:
https://services.leadtools.com/features/ocr
This way the OCR occurs on the cloud and the results can be made available on either end.