Blazor framework, JavaScript yerine HTML ve C# kullanarak etkileşimli UI web uygulamaları geliştirmek için kullanılan ASP.NET ekibi tarafından geliştirilmiştir. Blazor, WebAssembly kullanarak web tarayıcısında doğrudan C# kodunu çalıştırır. Bu, bileşenleri kolayca oluşturup geliştirmeyi ve tekrar tekrar kullanmayı kolaylaştırır. C#'ta UI oluşturmada geliştiriciler arasında popüler bir çerçevedir.

Bu makalede, IronOCR ile Optik Karakter Tanıma (OCR) kullanarak görüntü dosyalarından metin okuma için bir Blazor Server uygulaması oluşturacağız.

Blazor'da Optik Karakter Tanıma Kullanarak Görüntüden Metin Nasıl Okunur?

Ön Koşullar

1. Visual Studio'nun en son sürümüne sahip olun. Bu link'ten indirebilirsiniz.
2. ASP.NET ve Web Geliştirme iş yükü. Visual Studio'yu yüklerken, ASP.NET ve Web Geliştirme iş yükünü projeniz için kurulum için seçin.
3. IronOCR C# Kütüphanesi. Görüntü verilerini makine tarafından okunabilir metne dönüştürmek için IronOCR'u kullanacağız. IronOCR paket .DLL dosyasını doğrudan Iron web sitesi'nden ya da NuGet web sitesi'nden indirebilirsiniz. IronOCR'u indirmek ve yüklemek için daha uygun bir yol, Visual Studio'daki NuGet Paket Yöneticisi üzerinden yapmaktır.

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'a tıklayın ve ardından listelenen proje şablonlarından "Blazor Sunucu Uygulaması" seçin.

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

2. Sonra, projenizi uygun bir şekilde adlandırın. Burada, adını BlazorReadText olarak veriyoruz.

Blazor projesini yapılandırma

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

Proje için Uzun Süreli Destek .NET Framework ve ek bilgileri seçme

Blazor Sunucu Uygulaması artık oluşturuldu. Şimdi, IronOCR kullanarak Görüntü verilerini çıkarmadan önce gerekli paketleri yüklememiz gerekiyor.

Gerekli Paketleri Ekleme

BlazorInputFile

İlk adım BlazorInputFile paketini yüklemektir. Bu, Blazor uygulamaları için bir bileşendir ve sunucuya tek veya birden fazla dosya yüklemek için kullanılır. Bu bileşen, Blazor uygulamasındaki Razor sayfasına bir resim dosyası yüklemek için kullanılacaktır. Çözümler için NuGet Paketlerini Yönet açın ve BlazorInputFile arayın.

BlazorInputFile paketini yükle

Proje için onay kutusunu seçin ve Yükle'ye tıklayın.

Şimdi, Sayfalar klasöründeki _Host.cshtml dosyasını açın ve aşağıdaki JavaScript dosyasını ekleyin:

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

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

Çözüm Gezgini'nden _Host.cshtml dosyasına git

Son olarak, _Imports.razor dosyasına aşağıdaki kodu ekleyin.

@using BlazorInputFile

@using BlazorInputFile

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

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

IronOCR

IronOCR, farklı formatlarda Görüntüleri taramak ve okumak için bir C# kütüphanesidir. 125+ küresel dildeki görüntülerle çalışmak için olanak sağlar.

IronOCR'yi yüklemek için NuGet Paket Yöneticisi'ni açın ve IronOCR'yi arayın. Projeyi seçin ve Yükle düğmesine tıklayın.

NuGet Paket Yöneticisi'nde IronOCR paketini yükleyin

_Imports.razor dosyasında IronOCR ad alanını ekleyin:

@using IronOCR

@using IronOCR

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

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

Blazor Arayüz Bileşeni Oluşturun

Bir bileşen, dinamik davranışı sergilemek için iş mantığı ile bir kullanıcı arayüzünü temsil eder. Blazor, uygulamalarını oluşturmak için Razor Bileşenlerini kullanır. Bu bileşenler iç içe yerleştirilebilir, yeniden kullanılabilir ve projeler arasında paylaşılabilir. Varsayılan olarak, uygulamada Counter ve FetchData sayfaları sağlanır; basitlik için bu parçaları kaldırıyoruz.

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

Yeni Razor Bileşeni ekleyin

En iyi uygulama olarak, bu razor sayfası için kodu ayrı bir sınıf olarak ayırmanız önerilir. Tekrar sayfalar klasörüne sağ tıklayın ve Ekle > Sınıf seçin. Sınıfın adını sayfa adıyla aynı yapın ve Ekle'ye tıklayın. Blazor, akıllı bir çerçevedir ve bu sınıfı aynı adı paylaşan sayfayla etiketler.

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

Şimdi, IronOCR kullanarak görüntü verilerini okuyacak olan gerçek kod uygulamasına geçelim.

Blazor OCR.razor Arayüz Bileşeni Kaynak Kodu ile Görüntü Verilerini Oku

Bir resimdeki metni tanımak için resmi yükleyin, ikili veriye dönüştürün ve ardından metni çıkarmak için IronOCR yöntemini uygulayın.

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
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

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

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(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 = 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
        Protected Private 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

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
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

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

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(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 = 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
        Protected Private 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 resim dosyasını işlemek için kullanılır. Dosyanın bir resim 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 meydana gelirse, bu, bir if-else bloğu kullanılarak ele alınır. Görüntü, ardından bir MemoryStream kopyalanır ve IronOcr.OcrInput ikili biçimde bir görüntü kabul edebileceği için bir bayt dizisine dönüştürülür.
• GetText yöntemi, IronOCR'dan metin çıkarmak için kullanılır. IronOCR, Tesseract 5 motorunu kullanır ve 125+ dili destekler.

Çıkarılan metin, gösterim için imageText değişkeninde depolanır. Kütüphane, ek yapılandırma gerektirmeden İngilizce metin görüntülerini destekler. Bu kod örneği sayfasında farklı dillerin nasıl kullanılacağı hakkında daha fazla bilgi edinebilirsiniz.

Blazor Ön Uç Arayüz Bileşeni Kaynak Kodu

Sonra, uygulamanın arayüzünü oluşturun. 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>

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

Yukarıdaki kodda, arayüz şunları içerir:

• Bir resim dosyası seçmek için bir giriş dosyası etiketi.
• Resmi göstermek için bir resim etiketi.
• GetText yöntemini tetikleyen bir düğme.
• Görsel verilerden çıkarılan metni göstermek için bir metin alanı.

Gezinme Menüsü Bağlantısı Ekle

Son olarak, Paylaşılan klasördeki NavMenu.razor dosyasında 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ü bunlara gerek yoktur.

Her şey artık tamamlandı ve kullanıma hazır. Uygulamayı çalıştırmak için F5 tuşuna basın.

Ön uç aşağıda gösterildiği gibi görünmelidir:

Blazor Sunucu Uygulamasının Arayüzü

Bir görüntü yükleyelim ve metni çıkararak çıktıyı görselleştirelim.

Yüklenmiş görüntüler ve çıkarılan metinler

Çıktı metni temizdir ve metin alanından kopyalanabilir.

Özet

Bu makale, Blazor Sunucu Uygulamasında Blazor Arayüz Bileşeni oluşturmayı ve arka planındaki kod ile görüntülerden metin okumayı gösterdi. IronOCR herhangi bir C# tabanlı uygulamada metin çıkarmak için çok yönlü bir kütüphanedir. En son .NET Framework'u destekler ve Razor uygulamalarıyla iyi bir şekilde kullanılabilir. IronOCR, Windows, Linux, macOS, Docker, Azure, AWS ve MAUI üzerinde desteklenen çapraz platform bir kütüphanedir. Ayrıca, IronOCR, ek ayarlar olmadan Tesseract'tan en iyi sonuçları kullanarak yüksek doğruluk sağlar. Çok sayfalı kareli TIFF, PDF dosyaları ve tüm popüler görüntü formatlarını destekler. Görüntülerden barkod değerlerini okumak da mümkündür.

ücretsiz bir deneme ile ücretsiz olarak deneyebilirsiniz. Yazılım kütüphanesini buradan indirin.