• Reading Text from Images Using C#

    Introduction

    By using Optical Character Recognition (OCR), you can detect and extract handwritten and printed text present in an image. The API works with different surfaces and backgrounds. To use OCR as a service, you have to get a subscription key from the Microsoft Cognitive Service portal. Steps of registration and obtaining the API keys are mentioned in my previous article, "Analyzing Image Content Programmatically: Using the Microsoft Cognitive Vision API."

    In this post, I will demonstrate handwriting and text recognition by uploading a locally stored image consuming the Cognitive API.

    Embedded Text Recognition Inside an Image

    Step 1

    Five Reasons to Adopt Hybrid Cloud Storage for Your Data Center
    Download Now
     
     

    Create a new ASP.NET Web application in Visual Studio. Add a new ASPX page named TextRecognition.aspx. Then, replace the HTML code of TextRecognition.aspx with the following code.

    In the following ASPX code, I have created an ASP panel. Inside that panel, I have added an Image, TextBox, a file upload control, and Submit button. Locally browsed images with handwritten or printed text will be displayed in the image control. A textbox will display text present in the image after the Submit button is clicked.

    1. <%@ Page Language="C#" AutoEventWireup="true"
    2. CodeBehind="TextRecognition.aspx.cs"
    3. Inherits="TextRecognition.TextRecognition" %>
    4.  
    5. <!DOCTYPE html>
    6.  
    7. <html xmlns="http://www.w3.org/1999/xhtml">
    8. <head runat="server">
    9. <title>OCR Recognition</title>
    10. </head>
    11. <body>
    12. <form id="myform" runat="server">
    13. <div>
    14.  
    15. </div>
    16. <asp:Panel ID="ImagePanel" runat="server"
    17. Height="375px">
    18. <asp:Image ID="MyImage" runat="server"
    19. Height="342px" Width="370px" />
    20. <asp:TextBox ID="MyTestBox" runat="server"
    21. Height="337px" Width="348px"></asp:TextBox>
    22. <br />
    23. <input id="MyFileUpload" type="file"
    24. runat="server" />
    25. <input id="btnSubmit" runat ="server"
    26. type="submit" value="Submit"
    27. onclick="btnSubmit_Click"  />
    28. <br />
    29. </asp:Panel>
    30. </form>
    31. </body>
    32. </html>

    Step 2

    Add the following namespaces in your TextRecognition.aspx.cs code file.

    - Advertisement -
    1. using System;
    2. using System.Collections.Generic;
    3. using System.IO;
    4. using System.Linq;
    5. using System.Web;
    6. using System.Web.UI;
    7. using System.Web.UI.WebControls;
    8. using System.Net.Http;
    9. using System.Net.Http.Headers;
    10. using System.Diagnostics;

    Step 3

    Add the following app setting entries in your Web.config file. I have used an existing subscription key generated long back; you have to add your own subscription key registered from Azure Portal. The APIuri parameter key value is the endpoint of the ODR cognitive service.

    1. <appSettings>
    2. <add key="RequestParameters"
    3. value="language=unk&amp;detectOrientation =true"/>
    4. <add key="APIuri"
    5. value="https://westcentralus.api.cognitive.microsoft.com/
    6. vision/v1.0/ocr?"/>
    7. <add key="Subscription-Key"
    8. value="ce765f110a1e4a1c8eb5d2928a765c61"/>
    9. <add key ="Contenttypes" value="application/json"/>
    10. </appSettings>

    Step 4

    Now, add the following code in your TextRecognition.aspx.cs codebehind file. All static functions will return appSettings key values, as mentioned in Step 3. The BtnSubmit_Click event will occur once the Submit button is clicked. It will call the CallAPIforOCR async function. By using the GetByteArray function, the local image will be converted to bytes and that would be passed to Cognitive Services for recognition.

    1. public partial class TextRecognition : System.Web.UI.Page
    2. {
    3.  
    4. static string responsetext;
    5. static string responsehandwritting;
    6. static string Subscriptionkey()
    7. {
    8. return System.Configuration.ConfigurationManager
    9. .AppSettings["Subscription-Key"];
    10. }
    11. static string RequestParameters()
    12. {
    13. return System.Configuration.ConfigurationManager
    14. .AppSettings["RequestParameters"];
    15. }
    16.  
    17. static string ReadURI()
    18. {
    19. return System.Configuration.ConfigurationManager
    20. .AppSettings["APIuri"];
    21. }
    22. static string Contenttypes()
    23. {
    24. return System.Configuration.ConfigurationManager
    25. .AppSettings["Contenttypes"];
    26. }
    27.  
    28. protected void btnSubmit_Click(object sender, EventArgs e)
    29. {
    30. string fileName = System.IO.Path.GetFileName
    31. (MyFileUpload.PostedFile.FileName);
    32. MyFileUpload.PostedFile.SaveAs(Server.MapPath
    33. ("~/images/" + fileName));
    34. MyImage.ImageUrl = "~/images/" + fileName;
    35. CallAPIforOCR("~/images/" + fileName);
    36. MyTestBox.Text = responsetext;
    37.  
    38.  
    39. }
    40. static byte[] GetByteArray(string LocalimageFilePath)
    41. {
    42. FileStream ImagefileStream = new
    43. FileStream(LocalimageFilePath, FileMode.Open,
    44. FileAccess.Read);
    45. BinaryReader ImagebinaryReader = new
    46. BinaryReader(ImagefileStream);
    47. return ImagebinaryReader.ReadBytes((int)
    48. ImagefileStream.Length);
    49. }
    50. // Optical Character Reader
    51. static async void CallAPIforOCR(string LocalimageFilePath)
    52. {
    53. var ComputerVisionAPIclient = new HttpClient();
    54.  
    55. try {
    56. ComputerVisionAPIclient.DefaultRequestHeaders
    57. .Add("Ocp-Apim-Subscription- Key",
    58. Subscriptionkey());
    59. string requestParameters = RequestParameters();
    60. string APIuri = ReadURI() + requestParameters;
    61. HttpResponseMessage myresponse;
    62.  
    63. byte[] byteData = GetByteArray(LocalimageFilePath);
    64. var content = new ByteArrayContent(byteData);
    65. content.Headers.ContentType = new
    66. MediaTypeHeaderValue(Contenttypes());
    67. myresponse = await
    68. ComputerVisionAPIclient.PostAsync
    69. (APIuri, content);
    70. myresponse.EnsureSuccessStatusCode();
    71. responsetext = await myresponse.Content
    72. .ReadAsStringAsync();
    73.  
    74. }
    75.  
    76. catch (Exception e)
    77. {
    78. EventLog.WriteEntry("Text Recognition Error",
    79. e.Message + "Trace" + e.StackTrace,
    80. EventLogEntryType.Error, 121, short.MaxValue);
    81. }
    82. }

    Step 5

    Now, set TextRecognition.aspx as the default page and execute the Web application. After the page is displayed, click the browser button and open an local image with printed text on it. Click the Submit button to see the output.

    To show the demo, I have used the following image downloaded from the Internet. Successful execution of the Cognitive Services API call returns OCR, including text, a bounding box for regions, lines, and words. On the right side of the panel, you can see the embedded test displayed in the text box.

    Output of OCR recognition
    Figure 1: Output of OCR recognition

    Following is the JSON response from Cognitive Services.

    1. {
    2. "TextAngle": 0.0,
    3. "Orientation": "NotDetected",
    4. "Language": "en",
    5. "Regions": [
    6. {
    7. "BoundingBox": "21,246,550,132",
    8. "Lines": [
    9. {
    10. "BoundingBox": "21,246,550,33",
    11. "Words": [
    12. {
    13. "BoundingBox": "21,247,85,32",
    14. "Text": "How"
    15. },
    16. {
    17. "BoundingBox": "118,246,140,33",
    18. "Text": "Sundar"
    19. },
    20. {
    21. "BoundingBox": "273,246,121,33",
    22. "Text": "Pichai"
    23. },
    24. {
    25. "BoundingBox": "410,247,161,32",
    26. "Text": "Became"
    27. }
    28. ]
    29. },
    30. {
    31. "BoundingBox": "39,292,509,33",
    32. "Words": [
    33. {
    34. "BoundingBox": "39,293,72,32",
    35. "Text": "The"
    36. },
    37. {
    38. "BoundingBox": "126,293,99,32",
    39. "Text": "Most"
    40. },
    41. {
    42. "BoundingBox": "240,292,172,33",
    43. "Text": "Powerful"
    44. },
    45. {
    46. "BoundingBox": "428,292,120,33",
    47. "Text": "Indian"
    48. }
    49. ]
    50. },
    51. {
    52. "BoundingBox": "155,338,294,40",
    53. "Words": [
    54. {
    55. "BoundingBox": "155,338,118,33",
    56. "Text": "Inside"
    57. },
    58. {
    59. "BoundingBox": "287,338,162,40",
    60. "Text": "Google?"
    61. }
    62. ]
    63. }
    64. ]
    65. }
    66. ]
    67. }

    Recognize Handwriting

    For handwriting recognition from text present in an image, I have used the same application, but you have to change the APIuri path to point to the correct endpoint and update the RequestParameters key value added in the previous step.

    1. <appSettings>
    2. <add key="RequestParameters" value="handwriting=true"/>
    3. <add key="APIuri"
    4. value="https://westcentralus.api.cognitive
    5. .microsoft.com/vision/v1.0/recognizeText?"/>
    6. <add key="Subscription-Key"
    7. value="ce765f110a1e4a1c8eb5d2928a765c61"/>
    8. <add key ="Contenttypes" value="application/json"/>
    9. </appSettings>

    Also, add the following ReadHandwritttingFromImage async method. This function will replace the CallAPIforOCR function call present in the btnSubmit_Click event.

    1. static async void ReadHandwritttingFromImage(string LocalimageFilePath)
    2. {
    3. HttpResponseMessage myresponse = null;
    4. IEnumerable<string> myresponseValues = null;
    5. string operationLocation = null;
    6.  
    7. var ComputerVisionAPIclient = new HttpClient();
    8. ComputerVisionAPIclient.DefaultRequestHeaders.Add
    9. ("Ocp-Apim-Subscription-Key", Subscriptionkey());
    10. string requestParameters = RequestParameters();
    11. string APIuri = ReadURI() + requestParameters;
    12.  
    13.  
    14.  
    15. byte[] byteData = GetByteArray(LocalimageFilePath);
    16. var content = new ByteArrayContent(byteData);
    17.  
    18. content.Headers.ContentType = new
    19. MediaTypeHeaderValue(Contenttypes());
    20.  
    21. try
    22. {
    23. myresponse = await ComputerVisionAPIclient
    24. .PostAsync(APIuri, content);
    25. myresponseValues = myresponse.Headers
    26. .GetValues("Operation-Location");
    27. }
    28. catch (Exception e)
    29. {
    30. EventLog.WriteEntry("Handwritting Recognition Error",
    31. e.Message + "Trace" + e.StackTrace,
    32. EventLogEntryType.Error, 121, short.MaxValue);
    33. }
    34.  
    35. foreach (var value in myresponseValues)
    36. {
    37. operationLocation = value;
    38. break;
    39. }
    40.  
    41. try
    42. {
    43. myresponse = await ComputerVisionAPIclient
    44. .GetAsync(operationLocation);
    45. responsehandwritting = await myresponse.Content
    46. .ReadAsStringAsync();
    47. }
    48. catch (Exception e)
    49. {
    50. EventLog.WriteEntry("Handwritting Recognition Error",
    51. e.Message + "Trace" + e.StackTrace,
    52. EventLogEntryType.Error, 121, short.MaxValue);
    53. }
    54. }

    Now, execute the Web application again. After the page is displayed, click the browser button and open an local image with handwritten text on it. Click the Submit button to see the output.

    Output of handwriting recognition
    Figure 2: Output of handwriting recognition
  • 相关阅读:
    实现activity跳转动画的若干种方式
    Go语言下载网络图片或文件
    安卓获取输入法高度与ViewTreeObserver讲解
    记录某项目中的踩坑与解决（持续更新）
    Flutter安装教程
    安卓多个RecyclerView滑动与显示问题
    java.lang.IllegalStateException: FragmentManager is already executing transactions 及 SmartTabLayout复用
    Java实现中文词频统计
    知乎视频下载(爬虫)
    SuperSpider(简书爬虫JAVA版)
  • 原文地址：https://www.cnblogs.com/Javi/p/7192836.html
Copyright © 2020-2023  润新知