Blazor'da Görüntüden Metin Okuma Nasıl Yapılır

Önkoşullar

1. Visual Studio'nun en son sürümüne sahip olun. Bu linkten indirebilirsiniz.
2. ASP.NET ve Web Geliştirme iş yükü. Visual Studio'yu yüklerken, bu proje için gerekli olduğu için ASP.NET ve Web Geliştirme iş yükünü seçin.
3. IronOCR C# Kütüphanesi. Görüntü verilerini makine tarafından okunabilir metne dönüştürmek için IronOCR kullanacağız. Iron web sitesinden doğrudan IronOCR paketi .DLL dosyasını indirebilir veya NuGet web sitesinden indirebilirsiniz. IronOCR'u indirmenin ve kurmanın daha uygun bir yolu, Visual Studio'daki NuGet Paket Yöneticisi'nden yapmaktır.

Bir Blazor Sunucu Uygulaması Oluşturun

Visual Studio'yu açın ve bir Blazor Sunucu Uygulaması oluşturmak için adımları izleyin:

1. Yeni Bir Proje Oluştur'u tıklayın ve listelenen proje şablonlarından "Blazor Sunucu Uygulaması" seçin.

Visual Studio'da yeni bir Blazor Sunucu Uygulaması oluşturun

2. Ardından, projenize uygun bir isim verin. Burada, BlazorReadText ismini veriyoruz.

Blazor projesini yapılandırın

3. Son olarak, ek bilgileri ayarlayın ve Oluştur'u tıklayın.

Proje için Uzun Vadeli Destek .NET Çerçevesini ve ek bilgileri seçin

Blazor Sunucu Uygulaması şimdi oluşturuldu. Artık IronOCR kullanarak Resim verilerini çıkarmadan önce gerekli paketleri yüklemeliyiz.

Gerekli Paketleri Ekleyin

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

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

@using BlazorInputFile

@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

@using IronOCR

@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

Blazor UI Bileşeni Oluşturun

Bir bileşen dinamik davranış sergilemek için bir kullanıcı arayüzü ile iş mantığı temsil eder. Blazor, uygulamalarını inşa etmek için Razor Bileşenlerini kullanır. Bu bileşenler iç içe geçebilir, tekrar kullanılabilir ve projeler arasında paylaşılabilir. Varsayılan olarak, uygulamada Counter ve FetchData sayfaları sağlanır; sadelik için bunları kaldırıyoruz.

Sayfalar klasörüne, BlazorReadText uygulaması altındaki sağ tıklayın ve ardından Ekle > Razor Bileşeni seçin. Razor Bileşeni bulamazsanız, Yeni Öğe'yi tıklayın ve C# bileşenlerinden "Razor Bileşeni"ni seçin. Bileşene "OCR.razor" adı verin ve Ekle'yi tıklayın.

Yeni Razor Bileşeni ekleyin

Bu razor sayfası için en iyi uygulama olarak kodu başka bir sınıfla ayırmaktır. Tekrar sayfalar klasörüne sağ tıklayın ve Ekle > Sınıf'ı seçin. Sınıfa sayfa ismiyle aynı ismi verin ve Ekle'yi tıklayın. Blazor akıllı bir framework'tür ve bu sınıfı aynı adı paylaşan sayfa ile etiketler.

OCR.razor.cs Razor Bileşeni için bir OCR.razor kod dosyası oluşturun

Simdi, IronOCR kullanarak görüntü verilerini okuyacak olan asil kod uygulamasina gececegiz.

Blazor OCR.razor UI Komponent Kaynak kodu, Görüntü Verilerini Okuma

Bir resimdeki metni tanimak icin resmi yukleyin, ikili veriye dönüştürun ve sonra metni cikarmak icin IronOCR yöntemini uygulayin.

OCR.razor.cs sınıfını açın ve aşağıdaki örnek kaynak kodunu yazın:

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;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		' Holds the extracted text from the image
		Protected imageText As String

		' Holds the base64 string preview of the image
		Protected imagePreview As String

		' Byte array to store uploaded image data
		Private imageFileBytes() As Byte

		' Default status message for file upload
		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		' Maximum file size allowed (4MB)
		Private Const MaxFileSize As Integer = 4 * 1024 * 1024

		' Method to handle image preview and size/type validation
		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			End If

			If file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
				Return
			End If

			If Not file.Type.Contains("image") Then
				status = "Please upload a valid image file."
				Return
			End If

			Using memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
				imagePreview = $"data:image/png;base64,{base64String}"
				status = DefaultStatus
			End Using
		End Function

		' Method to extract text from the uploaded image using IronOCR
		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Using ocr = New IronTesseract()
				Using input = New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
				End Using
			End If
		End Function
	End Class
End Namespace

Yukarıdaki kodda:

• ViewImage yöntemi, yüklenen görüntü dosyasını işlemek için kullanılır. Dosyanın bir görüntü olup olmadığını doğrular ve boyutun belirtilen sınırı karşılayıp karşılamadığını kontrol eder. Dosya boyutunda veya dosya türünde herhangi bir hata oluşursa, bir if-else bloğu kullanılarak işlenir. Daha sonra görüntü MemoryStream'a kopyalanır ve IronOcr.OcrInput dosyası görüntüyü ikili formatta kabul edebildiğinden bir bayt dizisine dönüştürülür.
• GetText metodu, IronOCR kullanarak giriş görüntüsünden metin çıkartmak için kullanılır. IronOCR, Tesseract 5 motorunu kullanir ve 125'ten fazla dili destekler.

Çıkartılan metin, gösterim için imageText değişkeninde depolanır. Kutuphane, ekstra bir ayarlama gerektirmeden Ingilizce metin görüntülerini destekler. Farkli dilleri kullanmayi bu kod ornegi sayfasinda daha fazla ogrenebilirsiniz.

Blazor On Yuz UI Komponent Kaynak Kodu

Sonraki adim, uygulama icin UI oluşturmaktir. OCR.razor dosyasını açın ve aşağıdaki kodu yazın:

@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>

Yukaridaki kodda, UI su unsurlari icerir:

• Bir görüntü dosyasi secmek icin bir giris dosya etiketi.
• Görüntüyu göstermek icin bir görüntü etiketi.
• GetText yöntemini tetikleyen bir buton.
• Görüntü verilerinden cikarilan metni göstermek icin bir metin alani.

Gezinme Menusune Baglanti Ekleyin

Son olarak, Paylaşılan klasördeki NavMenu.razor dosyasına OCR.razor sayfasına bir bağlantı ekleyin:

<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 ve FetchData bağlantılarını kaldırın, çünkü ihtiyaç yok.

Her sey simdi tamamlandi ve kullanima hazır. Uygulamayi calistirmak icin F5 tusuna basin.

On yuz, asagidaki gibi gorunmelidir:

Blazor Sunucu Uygulamasinin UI'si

Bir görüntü yukleyelim ve ciktiyi gormek icin metni cikalim.

Yuklenmis görüntüler ve cikarilan metinler

Cikarilan text temizdir ve metin alanindan kopyalanabilir.