Add Azure Cognitive Services OCR API

Author: justinyoo

src/VueJsTsOcrAspNetCoreSample/Controllers/ApiController.cs

@@ -1,8 +1,14 @@
 using System;
-using System.Collections.Generic;
+using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
+
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.ProjectOxford.Vision;
+using Microsoft.ProjectOxford.Vision.Contract;
+
+using Newtonsoft.Json;
 
 namespace VueJsTsOcrAspNetCoreSample.Controllers
 {
@@ -16,5 +22,42 @@ public IActionResult Hello()
             var msg = new { Message = "Hello World" };
             return this.Ok(msg);
         }
+
+        [Route("ocr")]
+        [HttpPost]
+        public async Task<IActionResult> GetApiText(IFormFile file)
+        {
+            if (file == null)
+            {
+                file = this.Request.Form.Files.FirstOrDefault();
+            }
+
+            OcrResults result;
+            string imagePath;
+            using (var stream = file.OpenReadStream())
+            {
+                var client = new VisionServiceClient("[SUBSCRIPTION_KEY_GOES_HERE]");
+                try
+                {
+                    result = await client.RecognizeTextAsync(stream, languageCode: "en", detectOrientation: true).ConfigureAwait(false);
+
+                    using (var ms = new MemoryStream())
+                    {
+                        await file.CopyToAsync(ms).ConfigureAwait(false);
+                        var base64 = Convert.ToBase64String(ms.ToArray());
+                        var value = $"data:{file.ContentType};base64,{base64}";
+
+                        imagePath = value;
+                    }
+                }
+                catch (Exception e)
+                {
+                    Console.WriteLine(e);
+                    throw;
+                }
+            }
+
+            return Json(new { Result = result, ImagePath = imagePath }, new JsonSerializerSettings() { Formatting = Formatting.Indented });
+        }
     }
 }

src/VueJsTsOcrAspNetCoreSample/Properties/launchSettings.json

@@ -3,8 +3,8 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:26622/",
-      "sslPort": 0
+      "applicationUrl": "https://localhost:44340/",
+      "sslPort": 44340
     }
   },
   "profiles": {

src/VueJsTsOcrAspNetCoreSample/project.json

@@ -1,4 +1,4 @@
-{
+{
   "dependencies": {
     "Microsoft.NETCore.App": {
       "version": "1.1.0",
@@ -22,7 +22,8 @@
     "Microsoft.Extensions.Logging.Debug": "1.1.0",
     "Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
     "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0",
-    "Microsoft.AspNetCore.SpaServices": "1.1.0"
+    "Microsoft.AspNetCore.SpaServices": "1.1.0",
+    "Microsoft.ProjectOxford.Vision": "1.0.372"
   },
 
   "tools": {

src/VueJsTsOcrAspNetCoreSample/src/components/Ocr.ts

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import { Component, Inject } from "vue-property-decorator";
-import { AxiosStatic, AxiosResponse } from "axios";
+import { AxiosStatic, AxiosRequestConfig, AxiosResponse } from "axios";
 import Symbols from "../configs/Symbols";
 
 @Component({

src/VueJsTsOcrAspNetCoreSample/src/components/Ocr.vue

@@ -6,11 +6,11 @@
     </div>
 
     <div class="image-output">
-        <img id="ocr-image" ref="ocrOutput" />
+        <img id="ocr-image" ref="ocrOutput" style="width:300px" />
     </div>
 
     <div class="cognitive-result">
-        <textarea id="ocr-result" width="50" height="200px" ref="ocrResult"></textarea>
+        <textarea id="ocr-result" style="width: 300px; height: 200px;" ref="ocrResult"></textarea>
     </div>
   </div>
 </template>