OCR библиотека для WinRT приложений. Часть 2.

В первой части мы начали подготавливать почву для базового приложения. Собственно в это части мы его закончим и научимся пользоваться данной библиотекой.

Нашим следующим этапом было связывание нашей ViewModel’и с представлением:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App253"
      xmlns:img="Windows.UI.Xaml.Media.Imaging"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Converters="using:App253.Converters"
      x:Class="App253.MainPage"
      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Page.BottomAppBar>
    <CommandBar IsOpen="True">
      <AppBarButton Icon="ZoomIn"
                    Label="recognise"
                    Command="{Binding RecogniseCommand}" />
    </CommandBar>
  </Page.BottomAppBar>

  <Grid x:Name="LayoutRoot">
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <StackPanel Grid.Row="0"
                Margin="19,0,0,0">
      <TextBlock Text="OCR TEST APP"
                 Style="{ThemeResource TitleTextBlockStyle}"
                 Margin="0,12,0,0" />
      <TextBlock Text="cards"
                 Margin="0,-6.5,0,26.5"
                 Style="{ThemeResource HeaderTextBlockStyle}"
                 CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}" />
    </StackPanel>

    <Grid Grid.Row="1"
          x:Name="ContentRoot"
          Margin="19,9.5,19,0">
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <local:IncrementalFlipView ItemsSource="{Binding Items}"
                                 SelectedValue="{Binding SelectedPhoto, Mode=TwoWay}"
                                 IsEnabled="{Binding IsIdle}"
                                 x:Name="flipView">
        <local:IncrementalFlipView.ItemTemplate>
          <DataTemplate>
            <!-- What I want here is for the Image to size itself and for the Canvas
                 to be the same size as the Image no matter what the image does -->
            <Grid VerticalAlignment="Center"
                  HorizontalAlignment="Center"
                  Width="Auto"
                  Height="Auto">
              <Image Source="{Binding ImageUrl}"
                     Stretch="Uniform">
              </Image>
              <Canvas HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      RenderTransformOrigin="0.5,0.5">
                <Canvas.RenderTransform>
                  <RotateTransform Angle="0" />
                </Canvas.RenderTransform>
              </Canvas>
              <TextBlock Text="{Binding Title}" />
            </Grid>
          </DataTemplate>
        </local:IncrementalFlipView.ItemTemplate>
      </local:IncrementalFlipView>

      <StackPanel Orientation="Vertical"
                  Grid.Row="1"
                  VerticalAlignment="Top"
                  Margin="0,0,0,40">
        <TextBlock Text="name"
                   Style="{StaticResource TitleTextBlockStyle}" />
        <TextBlock Text="{Binding Name, FallbackValue=unset, TargetNullValue=unset}"
                   Style="{StaticResource ListViewItemContentTextBlockStyle}"
                   Margin="10,0,0,0" />
        <TextBlock Text="email"
                   Style="{StaticResource TitleTextBlockStyle}" />
        <TextBlock Text="{Binding Email, FallbackValue=unset, TargetNullValue=unset}"
                   Style="{StaticResource ListViewItemContentTextBlockStyle}"
                   Margin="10,0,0,0" />
        <TextBlock Text="phone"
                   Style="{StaticResource TitleTextBlockStyle}" />
        <TextBlock Text="{Binding Phone, FallbackValue=unset, TargetNullValue=unset}"
                   Style="{StaticResource ListViewItemContentTextBlockStyle}"
                   Margin="10,0,0,0" />
      </StackPanel>
    </Grid>
  </Grid>
 </Page>

и так, в итоге у нас получилось: IncrementalFlipView, который отображает товары и показывает изображения, а также выводит название в TextBlock. Ниже расположены три простых текстовых блока и кнопка, по нажатию на которую мы будем запускать распознавание.

Я буду возвращаться к канвасу, но его суть заключается в обеспечении поверхности рисования поверх изображения

Запустим и посмотрим, что же у нас получилось в итоге:

Добавим OCR.

Пока все идет хорошо, но этот пост должен был быть о использованием библиотеки OCR, а не о создании кастомных контролов и т.п, поэтому собственно я и добавлял ссылку на «Microsoft OCR» библиотеку.

Затем я добавил небольшой класс для представления изображения:

class CurrentImageInfo
{
  public uint Width { get; set; }
  public uint Height { get; set; }
  public byte[] Pixels { get; set; }
}

Добавим немного переменных:

CurrentImageInfo currentImageInfo;
HttpClient httpClient;
OcrEngine ocrEngine;

Изменим немного конструктор:

   public ViewModel()
   {
      this.Items = new FlickrBusinessCardPhotoResultCollection();
      this.recogniseCommand = new SimpleCommand(this.OnRecognise);
      this.IsIdle = true;
      this.httpClient = new HttpClient();
      this.ocrEngine = new OcrEngine(OcrLanguage.English);
    }

И наконец-то начнем реализовывать метод OnRecognise:

   async void OnRecognise()
   {
      this.IsIdle = false;
      try
      {
        if (this.selectedPhoto != null)
        {
          // I've deliberately avoided downloading any image bits until this point.
          // We (probably) have the image on the screen. However, that's hidden
          // inside an Image control which I'm letting do the URL->Image work
          // for me (as well as any caching it decides to do).
          // But, now, I actually need the bytes of the image itself and I can't
          // just grab them out of the image control so we go back to the web.
          try
          {
            await this.DownloadImageBitsAsync();
            OcrResult ocrResult = await this.RunOcrAsync();
  
            if (ocrResult != null)
            {
            }
          }
          catch
          {
            // TBD...
          }
        }
      }
      finally
      {
        this.IsIdle = true;
      }

и конечно же функция по загрузке изображения:

   async Task DownloadImageBitsAsync()
   {
      this.currentImageInfo = null;
      // TODO: do I really have to do all this to get the pixels, width, height or
      // can I shortcut it somehow?
      using (var inputStream = await this.httpClient.GetInputStreamAsync(new Uri(this.SelectedPhoto.ImageUrl)))
      {
        using (InMemoryRandomAccessStream memoryStream = new InMemoryRandomAccessStream())
        {
          await RandomAccessStream.CopyAsync(inputStream, memoryStream);
          memoryStream.Seek(0);
          BitmapDecoder decoder = await BitmapDecoder.CreateAsync(memoryStream);
          PixelDataProvider provider = await decoder.GetPixelDataAsync();
          this.currentImageInfo = new CurrentImageInfo()
          {
            Width = decoder.PixelWidth,
            Height = decoder.PixelHeight,
            Pixels = provider.DetachPixelData()
          };
        }
      }
    }

и наконец-то использование искомой библиотеки:

   async Task<OcrResult> RunOcrAsync()
   {
      var results = await this.ocrEngine.RecognizeAsync(
        this.currentImageInfo.Height,
        this.currentImageInfo.Width,
        this.currentImageInfo.Pixels);
 
      return (results);
    }

По-моему использование библиотеки ОЧЕНЬ простое. Наш вариант ни чем не отличается по сложности — выкачали изображение — передали на распознавание!

Получение результатов и рисование квадратов вокруг совпадений.

С точки зрения отображения результатов — я написал небольшой класс, который поможет мне распарсить номера телефонов, адреса электронной почты и простые имена:

namespace App253
{
  using System.Collections.Generic;
  using System.Text.RegularExpressions;
  enum RecognitionType
  {
    Other,
    Email,
    Phone,
    Name
  }
 
  static class CardTextRecogniser
  {
    public static RecognitionType Recognise(string businessCardText)
    {
      RecognitionType type = RecognitionType.Other;
      foreach (var expression in expressions)
      {
        if (Regex.IsMatch(businessCardText, expression.Value))
        {
          type = expression.Key;
          break;
        }
      }

      return(type);
    }

    static Dictionary<RecognitionType, string> expressions = new Dictionary<RecognitionType,string>()
    {
       // regex taken from MSDN: http://msdn.microsoft.com/en-us/library/01escwtf(v=vs.110).aspx  
       {
          RecognitionType.Email,
          @"^(?("")("".+?(?<!\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" + @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$"
       },
       // regex taken from regex lib: http://regexlib.com/REDetails.aspx?regexp_id=296
       {
          RecognitionType.Phone,
          @"^(\+[1-9][0-9]*(\([0-9]*\)|-[0-9]*-))?[0]?[1-9][0-9\- ]*$"
       },
       // regex taken from regex lib: http://regexlib.com/REDetails.aspx?regexp_id=247
       {
          RecognitionType.Name,
          @"^([ \u00c0-\u01ffa-zA-Z'])+$"
       },
     };
  }
}

ничего заумного там не происходит. Далее рассмотрим выделение необходимого текста на изображении. При этом нельзя забывать, что изображение, которое отображается на экране, возможно, имеет немного другие размеры по отношению к тому, которое мы получили из интернета и передали на распознание OCR.

Именно поэтому я написал следующий класс-маппер:

namespace App253
{
  using Windows.Foundation;
 
  class CoordinateMapper
  {
    public CoordinateMapper(Rect sourceSpace, Rect destSpace)
    {
      this.sourceSpace = sourceSpace;
      this.destSpace = destSpace;
    }

    public Point MapPoint(Point source)
    {
      double x = (source.X - sourceSpace.Left) / sourceSpace.Width;
      x = destSpace.Left + (x * (destSpace.Width));
      double y = (source.Y - sourceSpace.Top) / (sourceSpace.Height);
      y = destSpace.Left + (y * (destSpace.Height));
 
      return(new Point() { X = x, Y = y});
    }
 
    public double MapWidth(double width)
    {
      return(width / sourceSpace.Width * destSpace.Width);
    }
 
    public double MapHeight(double height)
    {
      return (height / sourceSpace.Height * destSpace.Height);
    }
 
    Rect sourceSpace;
    Rect destSpace;
  }
}

После я сделал небольшие изменений в коде страницы и передал ItemContainerGenerator логике, и добавил немного переменных во ViewModel.

static SolidColorBrush redBrush = new SolidColorBrush(Colors.Red);
Canvas drawCanvas;
CurrentImageInfo currentImageInfo;

Далее, при каждом изменении выбранного (отображаемого) элемента будем обнулять значение вспомогательных полей:

public FlickrPhotoResult SelectedPhoto
{
  get
  {
    return (this.selectedPhoto);
  }
  set
  {
    this.selectedPhoto = value;
    // modified
    this.InitialiseDrawCanvas();
  }
}

метод выглядит следующим образом:

   void InitialiseDrawCanvas()
   {
     this.drawCanvas = null;
     if (this.SelectedPhoto != null)
     {
       FlipViewItem fvi = (FlipViewItem)this.itemContainerGenerator.ContainerFromItem(this.SelectedPhoto);
       this.drawCanvas = (Canvas)fvi.GetDescendantByType(typeof(Canvas));
       this.drawCanvas.Children.Clear();
       this.Phone = this.Email = this.Name = string.Empty;
     }
   }

Отображение результатов

В итоге я немного модифицировал метод распознования:

async void OnRecognise()
{
    this.IsIdle = false;
    try
    {
       if (this.selectedPhoto != null)
       {
         // I've deliberately avoided downloading any image bits until this point.
         // We (probably) have the image on the screen. However, that's hidden
         // inside an Image control which I'm letting do the URL->Image work
         // for me (as well as any caching it decides to do).
         // But, now, I actually need the bytes of the image itself and I can't
         // just grab them out of the image control so we go back to the web.
         try
         {
           await this.DownloadImageBitsAsync();
           OcrResult ocrResult = await this.RunOcrAsync();
           if (ocrResult != null)
           {
             // Modified
             this.DrawOcrResults(ocrResult);
             this.ApplyPatternMatching(ocrResult);
           }
         }
         catch
         {
           // TBD...
         }
       }
     }
     finally
     {
       this.IsIdle = true;
     }
   }

и собственно отрисовка:

   void DrawOcrResults(OcrResult ocrResult)
   {
      this.RepeatForOcrWords(ocrResult, (result, word) => 
      {
        Rectangle rectangle = MakeOcrDrawRectangle(ocrResult, word);
        this.drawCanvas.Children.Add(rectangle);
      });
   }

   void RepeatForOcrWords(OcrResult ocrResult, Action<OcrResult, OcrWord> repeater)
   {
     if (ocrResult.Lines != null)     
     {
        foreach (var line in ocrResult.Lines)
        {
          foreach (var word in line.Words)
          {
            repeater(ocrResult, word);
          }
        }
     }
   }

   Rectangle MakeOcrDrawRectangle(OcrResult ocrResult, OcrWord word)
   {
     // Avoided using CompositeTransform here as I could never quite get my
     // combination of Scale/Rotate/Translate to work right for a given
     // RenderTransformOrigin. Probably my fault but it was easier to
     // just do it myself.
     CoordinateMapper mapper = new CoordinateMapper(new Rect(0, 0, this.currentImageInfo.Width, this.currentImageInfo.Height), new Rect(0, 0, this.drawCanvas.ActualWidth, this.drawCanvas.ActualHeight));
     Rectangle r = new Rectangle()
     {
       Width = mapper.MapWidth(word.Width),
       Height = mapper.MapHeight(word.Height),
       RenderTransformOrigin = new Point(0.5, 0.5)
     };

     r.Stroke = redBrush;
     r.StrokeThickness = 1;
     Point mappedPoint = mapper.MapPoint(new Point(word.Left, word.Top));
     Canvas.SetLeft(r, mappedPoint.X);
     Canvas.SetTop(r, mappedPoint.Y);
     RotateTransform rotate = this.drawCanvas.RenderTransform as RotateTransform;
     rotate.Angle = 0.0d - ocrResult.TextAngle ?? 0.0d;

     return r;
   }

ну и конечно же не забываем выводить данные на экран:

   void ApplyPatternMatching(OcrResult ocrResult)
   {
      this.RepeatForOcrWords(ocrResult,(result, word) => 
      {
         switch (CardTextRecogniser.Recognise(word.Text))
         {
           case RecognitionType.Other:
             break;
           case RecognitionType.Email:
             this.Email = word.Text;
             break;
           case RecognitionType.Phone:
             this.Phone = word.Text;
             break;
           case RecognitionType.Name:
             this.Name = word.Text;
             break;
           default:
             break;
         }
       }
     );
}

Ну вот и все! Не правда ли все очень просто?

Ссылка на источник: OCR Library for WinRT Apps–Recognising Business Cards…