Reading Text from Images Using C#_doi2746的博客-程序员秘密

技术标签： ui  json  xhtml  

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

转载于:https://www.cnblogs.com/Javi/p/7192836.html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doi2746/article/details/101572545

智能推荐

spring ioc原理（生动、形象、易懂）_YuZongTao的博客-程序员秘密

IOC（DI）：其实这个Spring架构核心的概念没有这么复杂，更不像有些书上描述的那样晦涩。java程序员都知道：java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成，通常，每个对象在使用他的合作对象时，自己均要使用像new object（） 这样的语法来完成合作对象的申请工作。你会发现：对象间的耦合度高了。而IOC的思想是：Spring容器来实现这些相互依赖对象的创建、协调工作。对象

抽屉新热榜_weixin_30952103的博客-程序员秘密

1.实现与抽屉新热榜一样的布局2.允许点赞、评论3.开发登录、注册页面4.开发发贴功能index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!-- 以最高的ie 浏览器 渲染 --&gt;...

15—(异常&文件)_里边_无痕的雨的博客-程序员秘密

课堂笔记1. 异常简介程序在运⾏过程中可能会出现⼀些错误。⽐如: 使⽤了不存在的索引，两个不同类型的数据相加…这些错误我们称之为异常处理异常 程序运⾏时出现异常，⽬的并不是让我们的程序直接终⽌！Python是希望在出现异常时，我们可以编写代码来对异常进⾏处理#语法：try: 代码块(可能出错的代码)：出错了就不执行，没有错就执行except: 代码块(出错了就执行的语句，没有出错就不执行)else: 代码(没有出错会执行，出错了不执行，和t

OC学习篇之---Foundation框架中的NSObject对象_小强之路的博客-程序员秘密

版权声明：本文为CSDN：jiangwei0910410003专栏的专栏原博主原创文章注：本文来自http://blog.csdn.net/jiangwei0910410003/article/details/41788121从这篇文章开始我们开始介绍Foundation框架。OC中的Foundation框架是系统提供了，他就相当于是系统的一套api,和Ja

Arcgis系列——gis读取ascii文件头格式_arcgis的ascii格式多波段文件构成_Shraon_L的博客-程序员秘密

（1）ascii头文件格式参考中国气象数据网0.5°格点数据的文件格式，题头格式如下：NCOLS xxxNROWS xxxXLLCORNER xxxYLLCORNER xxxCELLSIZE xxxNODATA_VALUE xxxrow 1row 2..row nASCII 文件有两种结构。一种用左下角栅格像元的左下角坐标来标识原点，另一种用左下角栅格像元的中心来标识原点。关键字定义如下：ncols，nrows表示行列数，该文件共72行，128列； xllco

mysql表字段一定要写英文吗_关于数据库列名是否必须是英文的？_weixin_39614874的博客-程序员秘密

中文是可以使用的，但是建议你在设计时应该有一定的命名规则。表名，列名，都会记录在一些系统表的字段里，如果处理不好中文文字编码问题，在日后的工作中，中文的数据表名，字段名，会给你带来非常大的麻烦。毕竟中文不属于常用的ascii字符。还是老老实实的用英文吧。给你一份详细的说明：在SQL SERVER中标识符共有两种类型:一种是规则标识符(Regular identifer)，一种是界定标识符(Deli...

随便推点

Date、String、Calendar类型之间的转化_calander 转换为string_hy_zzzzz的博客-程序员秘密

1.Calendar 转化 String //获取当前时间的具体情况,如年,月,日,week,date,分,秒等         Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");String dateStr = sdf.form

JMS - ActiveMQ - 介绍 、使用场景、优点和不足_nethub2的博客-程序员秘密

ActiveMQj简介ActiveMQ 是Apache出品，最流行的，能力强劲的开源消息总线。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现，尽管JMS规范出台已经是很久的事情了，但是JMS在当今的J2EE应用中间仍然扮演着特殊的地位。开源的JMS Provider大部分都已经停止发展。  ActiveMQ明显的竞争者并不多，因为它...

Web3j通过合约地址监听transfer事件获取以太坊交易数据_web3j 合约地址_摸鱼佬的博客-程序员秘密

web3j通过合约地址监听transfer事件获取以太坊交易数据we3j核心特性功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入...

Plsql Developer连接Oracle时出现 initializetion error 你确认已经安装了32位Oracle Client 解决方案_plsql报错无法初始化，确保安装32_可乐cc呀的博客-程序员秘密

使用 plsqlDeveloper 出现下面问题：解决办法：两步一：去oracle官网下载插件：https://www.oracle.com/technetwork/database/database-technologies/instant-client/overview/index.html接受协议：下载上图这个版本，当然下载的话...

Win10+Python 3.6环境下cuda 9.1+cuDNN 7.1+Tensorflow 1.7+keras安装_爱吃番茄的胖超人的博客-程序员秘密

安装环境：windows 10 64bit python 3.6安装以下步骤进行安装：更新GPU驱动—&amp;gt;安装cuda—&amp;gt;安装cuDNN—&amp;gt;安装Tensorflow—&amp;gt;安装keras1、更新GPU驱动首先查看机器的GPU型号，查看其是否支持cuda，在Nvidia官网下载对应的最新驱动进行跟新。这一步应该很简单，就不多说了。2、安装c...

Android Framework源码解读 - Audio - SoundTrigger(1) - AIDL_lzqustc的博客-程序员秘密

SoundTrigger语音识别架构是Android5.0才引入，在Android7.0逐步完善。官方介绍：https://source.android.google.cn/devices/audio/sound-triggerThe Sound Trigger feature provides apps with the ability to listen for certain acoustic events, like hotwords, in a low-power and privacy-

推荐文章

热门文章

相关标签