Blazor 에서 이미지에서 텍스트를 읽는 방법

필수 조건

1. 최신 버전의 Visual Studio가 있어야 합니다. 여기서 링크를 통해 다운로드할 수 있습니다.
2. ASP.NET 및 웹 개발 작업 부하. Visual Studio 설치 시 해당 프로젝트에 필요한 ASP.NET 및 웹 개발 작업 부하를 선택하여 설치하십시오.
3. IronOCR C# 라이브러리. 우리는 이미지 데이터를 기계가 읽을 수 있는 텍스트로 변환하기 위해 IronOCR을 사용할 것입니다. Iron 웹사이트에서 IronOCR 패키지 .DLL 파일을 직접 다운로드하거나 NuGet 웹사이트에서 다운로드할 수 있습니다. Visual Studio의 NuGet 패키지 관리자에서 IronOCR을 다운로드하고 설치하는 것이 더 편리한 방법입니다.

Blazor 서버 앱 생성

Visual Studio를 열고 Blazor 서버 앱을 생성하기 위한 단계를 따르십시오:

1. 새 프로젝트 만들기를 클릭한 다음 나열된 프로젝트 템플릿에서 "Blazor 서버 앱"을 선택합니다.

   Visual Studio에서 새 Blazor 서버 앱 생성

2. 다음으로 프로젝트에 적절한 이름을 지정합니다. 여기서는 BlazorReadText로 이름을 지정합니다.

   Blazor 프로젝트 구성

3. 마지막으로 추가 정보를 설정하고 생성 버튼을 클릭하십시오.

   프로젝트에 대해 장기 지원 .NET Framework 및 추가 정보 선택

Blazor 서버 앱이 이제 생성되었습니다. 이제 IronOCR을 사용하여 이미지 데이터를 추출하기 전에 필요한 패키지를 설치해야 합니다.

필요한 패키지 추가

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 4: BlazorInputFile Install-Package](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-4.webp)

<script src="_content/BlazorInputFile/inputfile.js"></script>

<script src="_content/BlazorInputFile/inputfile.js"></script>

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 5: 솔루션 탐색기에서 _Host.cshtml 파일로 이동](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-5.webp)

@using BlazorInputFile

@using BlazorInputFile

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 6: NuGet 패키지 관리자에서 IronOcr Install-Package](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-6.webp)

@using IronOCR

@using IronOCR

Blazor UI 구성 요소 생성

구성 요소는 동적 동작을 표시하기 위한 비즈니스 로직이 포함된 사용자 인터페이스를 나타냅니다. Blazor는 Razor 구성 요소를 사용하여 앱을 빌드합니다. 이러한 구성 요소는 중첩될 수 있고, 재사용 가능하며, 프로젝트 간에 공유될 수 있습니다. 기본적으로 Counter 및 FetchData 페이지가 애플리케이션에 제공됩니다; 단순화를 위해 제거합니다.

BlazorReadText 애플리케이션 아래의 페이지 폴더를 오른쪽 클릭하고, 추가 > Razor 구성 요소를 선택하십시오. Razor 구성 요소를 찾을 수 없는 경우, 새 항목을 클릭하고 C# 구성 요소에서 "Razor 구성 요소"를 선택합니다. 구성 요소 이름을 "OCR.razor"로 설정하고 추가를 클릭합니다.

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 7: 새로운 Razor 구성 요소 추가](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-7.webp)

새로운 Razor 구성 요소 추가

최고의 방법은 이 razor 페이지의 코드를 다른 클래스처럼 분리하는 것입니다. 다시 pages 폴더를 마우스 오른쪽 버튼으로 클릭하고 추가 > 클래스를 선택합니다. 클래스 이름을 페이지 이름과 동일하게 설정하고 추가를 클릭합니다. Blazor는 스마트한 프레임워크로, 이 클래스를 같은 이름을 공유하는 페이지에 태그합니다.

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 8: OCR.razor Razor 구성 요소용 OCR.razor.cs 코드 파일 생성](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-8.webp)

OCR.razor Razor 구성 요소용 OCR.razor.cs 코드 파일 생성

이제 실제 코드 구현으로 이동하여 IronOCR를 사용하여 이미지 데이터를 읽어보겠습니다.

Blazor OCR.razor UI 구성 요소 소스 코드로 이미지 데이터 읽기

이미지의 텍스트를 인식하려면 이미지를 업로드하고, 이진 데이터로 변환한 다음, IronOCR 메소드를 적용하여 텍스트를 추출합니다.

OCR.razor.cs 클래스를 열고 다음 예제 소스 코드를 작성하십시오:

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;

        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;

        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

위 코드에서:

• 업로드된 이미지 파일을 처리하기 위해 ViewImage 메서드를 사용합니다. 파일이 이미지인지 확인하고 크기가 지정된 제한에 충족하는지 확인합니다. 파일 크기 또는 파일 타입에서 오류가 발생하면 if-else 블록을 사용하여 처리됩니다. 그런 다음 이미지를 MemoryStream로 복사하고 이미지가 이진 형식으로 IronOcr.OcrInput에서 수용할 수 있도록 바이트 배열로 변환합니다.
• GetText 메서드는 IronOCR을 이용하여 입력된 이미지에서 텍스트를 추출합니다. IronOCR는 Tesseract 5 엔진을 사용하며 125개 이상의 언어를 지원합니다.

추출된 텍스트는 표시를 위해 imageText 변수에 저장됩니다. 라이브러리는 추가 설정 없이 영어 텍스트 이미지를 지원합니다. 다른 언어 사용에 대해 자세히 알아보려면 코드 예제 페이지를 참조하세요.

Blazor 프론트엔드 UI 구성 요소 소스 코드

다음으로, 애플리케이션의 UI를 생성합니다. OCR.razor 파일을 열고 다음 코드를 작성하십시오:

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

위의 코드에서는 UI가 다음을 포함합니다:

• 이미지 파일을 선택하기 위한 입력 파일 태그.
• 이미지를 표시하기 위한 이미지 태그.
• GetText 메서드를 트리거하는 버튼.
• 이미지 데이터에서 추출한 텍스트를 표시하기 위한 텍스트 영역.

탐색 메뉴에 링크 추가

마지막으로 Shared 폴더 아래의 NavMenu.razor 파일에 OCR.razor 페이지로의 링크를 추가하십시오:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

Counter 및 FetchData에 대한 링크를 제거하십시오, 필요하지 않기 때문입니다.

이제 모든 것이 완료되어 사용할 준비가 되었습니다. F5를 눌러 애플리케이션을 실행하십시오.

프론트엔드는 아래와 같이 표시되어야 합니다:

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 9: Blazor 서버 앱의 UI](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-9.webp)

Blazor 서버 앱의 UI

이제 이미지를 업로드하고 텍스트를 추출하여 출력을 시각화해봅시다.

![Blazor에서 이미지로부터 텍스트를 읽어오는 방법, 그림 10: 업로드된 이미지 및 추출된 텍스트](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-10.webp)

업로드된 이미지와 추출된 텍스트

출력된 텍스트는 깔끔하며, 텍스트 영역에서 복사할 수 있습니다.