OCR Windows 10 UWP 앱 만들기

Microsoft MVP 박문찬입니다. 4월 정기 모임에서 사용할 앱 만들기를 초보분들이 따라하기 쉽게 정리 합니다.

 

 

1. 필요사항

Windows 10이 설치된 PC or 테블릿

Visual Studio 2015 Update 2가 적용된 것으로..(아무래도 최신이 좋겠죠?)

Windows 10 SDK

https://developer.microsoft.com/en-US/windows/downloads/windows-10-sdk

 

Windows 10 UWP App Sample 모음

https://github.com/Microsoft/Windows-universal-samples

 

이 셈플 중 OCR 셈플을 기준으로 설명합니다.

 

 

2. OCR 셈플을 실행

 

위에 셈플 코드를 다운 받은 후 압축을 풀어주면, Samples 폴더 아래 OCR/cs 폴더가 있습니다. OCR.sln 파일을 열고 실행 합니다.

 

2-1. OCR image file

이미지에서 택스트를 뽑아내는 셈플이고, 여기에서 간단하게 작동 원리를 알아보고, 만들어 보겠습니다.

 

 

 

3. Blank App 템플릿으로 만들면 뭐하나요?

 

일반적으로 UWP(Universal Windows Platform) 앱을 만들려고, New Project 를 선택하면, Blank App 말고는 새로운 템플릿이 없습니다.

 

그걸로 만들면 정말 성의 없다는 느낌이 있죠? 여기서는 Intense Templates을 이용하도록 하겠습니다.

 

Intense Templates를 이용하기 위해서는 Tools -> Extensions and Updates를 선택하고, Online을 선택 후 오른쪽 상단 검색하는 부분에서 Intense를 입력해서 검색한 후 설치하시면 돼요.

 

그런데..요즘 비주얼 스튜디오 이용자가 폭주를 해서 그런지 Online을 선택 후에 데이터가 표시되지 않는 현상이 자주 발생하고 있다. 이 경우에는 그냥 검색하시고, 다운로드 후 설치하세요

 

 

직접 다운로드

https://visualstudiogallery.msdn.microsoft.com/b7076e96-d4ab-4150-b2c6-12730abd5666

 

 

 

 

IntenseTemplates.vsix 파일을 더블 클릭하면 설치가 됩니다.

 

설치가 완료 된 후 New Project를 선택하면, 아래와 같은 다양한 템플릿이 추가되어 있다. 이중에서 제일 아래있는 항목을 선택하고 프로젝트 이름을 입력하고 위치를 지정(반드시 C:\ 경로 사용) OK를 누르면 생성~

 

 

그리고 실행해보면..................

 

짜잔~ 손 앙대고 코풀기!!!!!! 이렇게 쉽게 멋진 기본 앱을 만들 수 있답니당. ㅋㅋ

 

 

 

4. 기본 흐름

 

앱 시작 -> 이미지 불러오기 -> 택스트 추출 -> 추출한 택스트 화면에 출력

 

 

5. WelcomePage.xaml

프로젝트에서 WelcomePage.xaml에 작업을 합니다.

* 이 예제는 초보 대상 강좌이기 때문에 MVVM 패턴을 제외하고 이벤트 드리븐 방식으로만 만듭니다.

 

하단 앱바 추가

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Name="OpenFile" Icon="OpenFile" Click="OpenFile_Click"/>
        <AppBarButton x:Name="Extract" Icon="Character" Click="Extract_Click"/>
    </CommandBar>
</Page.BottomAppBar>

Grid를 2개 영역으로 분리

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="3*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

 

바로 아래 이미지와 텍스트 블럭 추가

 

<Image x:Name="image"  Grid.Row="0"/>
<TextBlock Name="ExtractedTextBox" Grid.Row="1" IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords"  />

 

 

6. WelcomePage.xaml.cs

 

6-1. 오픈 파일 버튼 클릭

private async void OpenFile_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) 

{
    //이미지 파일을 선택하기 위해서 파일 피커를 사용합니다.
    var picker = new FileOpenPicker()
    {
        SuggestedStartLocation = PickerLocationId.PicturesLibrary,
        FileTypeFilter = { ".jpg", ".jpeg", ".png" },
    };
    //선택된 파일하나를 가지고 옵니다.
    var file = await picker.PickSingleFileAsync();
    if (file != null)
    {
        //화면에 출력된 텍스트를 지웁니다.
        ClearResults();
        //이미지를 로딩합니다.
        await LoadImage(file);
    }

}

 

6-2. 이미지 로딩

private async Task LoadImage(StorageFile file)
{
    //전달받은 file을 읽기 전용으로 열고, 스트림을 얻습니다.
    using (var stream = await file.OpenAsync(FileAccessMode.Read))
    {
        //비트맵 디코더를 생성
        var decoder = await BitmapDecoder.CreateAsync(stream);

        //디코더를 이용해서 SoftwareBitmap을 생성합니다.
        _bitmap = await decoder.GetSoftwareBitmapAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);

        //화면에 출력하기위해 WriteableBitmap을 만듭니다.
        var imgSource = new WriteableBitmap(_bitmap.PixelWidth, _bitmap.PixelHeight);
        _bitmap.CopyToBuffer(imgSource.PixelBuffer);
        //화면 컨크롤에 출력합니다.
        PreviewImage.Source = imgSource;
    }
}

 

OCR이나 기타 이미지 처리용 API를 이용하기 위해서는 반드시 SoftwareBitmap을 이용해야 합니다. 이 SoftwareBitmap 클래스는 윈도우 10 10.0.10240.0 이상 버전에 사용이 가능합니다.

 

SoftwareBitmap class

https://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.imaging.softwarebitmap.aspx

 

추가적으로 화면에 이미지를 출력하기 위해서 SoftwareBitmap을 WriteableBitmap으로 변경을 합니다.

이렇체 처리한 이유는 처음부터 BitmapImage로 그냥 읽었다면 바로 출력이 가능하지만, 그렇게 하지 않았기 때문입니다.

 

여기까지 작업한 후에 이미지를 불러와서 화면에 출력한 내용 입니다.

 

 

6-3. 텍스트 추출 버튼 클릭

 

private async void Extract_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    if (_bitmap == null)
    {
        await MsgBox("이미지가 없지 말입니다.");
        return;
    }
    // OcrEngine이 지원하는 이미지 사이즈인지 확인
    if (_bitmap.PixelWidth > OcrEngine.MaxImageDimension || _bitmap.PixelHeight > OcrEngine.MaxImageDimension)
    {
        await MsgBox("이미지가 너무 커서 않되지 말입니다.");
        return;
    }

    //드디어 출격!!
    //한국어 인식하도록 지정
    var ocrEngine = OcrEngine.TryCreateFromLanguage(new Language("ko"));
    if (ocrEngine == null)
    {
        await MsgBox("지원 가능한 언어가 없지 말입니다.");
        return;
    }

    // 이미지에서 택스트를 인식합니다.
    var ocrResult = await ocrEngine.RecognizeAsync(_bitmap);

    // 인식된 텍스트를 텍스트블럭에 출력
    Extracted.Text = ocrResult.Text;

}

 

이렇게만 하면 이미지에거 택스트 뽑아내기 성공~

정말 쉽죠?? ㅎㅎㅎ

 

자자 최종 화면을 보도록 할까요?

 

 

이미지 하단에 텍스트가 출력되었습니다~ 100% 완벽하지 않으니, 약간의 보정이 필요하겠죠? 보정은 개발자의 몫인것 같아요.. 그러고보니, 금주 토요일날 Build 2016 특집 세미나가 있네요~

 

 

7. 마치며

OCR 기능 이용해서 앱 만들기 참 쉽죠? Offline에서도 동작을하고, 사용에 제한도 없습니다. 마구마구 사용해서 좋은 앱 많이 만들어 주세요

 

 

8. 소스

 

OCRSample.zip