Data retrival from Image

Question

If i upload an image ( like purchase bill ) to my web page , then it should extract the data from that image and bind that data to the input fields in the form It sholud use only Angular 6 and every thing should be done in the front-end

Hussam Barouqa · Answer

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.