ASP.NET Core Barkod Tarayıcı

Ön Koşullar

1. Visual Studio 2022 veya daha yenisi (veya .NET desteği olan herhangi bir IDE)
2. .NET 6.0 veya daha yeni SDK

Projeyi Oluşturun

Yeni bir ASP.NET Core Web Uygulaması (Razor Pages) projesi oluşturun. Bu, Visual Studio'nun proje sihirbazı aracılığıyla veya komut satırından yapılabilir:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

IronBarcode Kütüphanesini Yükleyin

NuGet Paket Yöneticisi Konsolu kullanarak IronBarcode kütüphanesini yükleyin. Visual Studio'da Tools > NuGet Package Manager > Package Manager Console'ye gidin ve çalıştırın:

Install-Package BarCode

Alternatif olarak, komut satırından dotnet add package BarCode ile yükleyin. En son sürüm NuGet web sitesinde bulunmaktadır.

Ön Yüz

Önyüz, bir dosya yükleme formundan ve sonuç gösterim alanından oluşur. Form, ikili dosya yüklemelerini enctype="multipart/form-data" ile işler. Barkod algılandığında, sonuç başarı uyarısı olarak yüklenen görüntünün altında görünür.

Index.cshtml dosyasındaki içeriği aşağıdakilerle değiştirin:

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>

HTML

Yerleşim, ASP.NET Core'un varsayılan şablonunda zaten bulunan Bootstrap sınıflarını kullanır. Form, Upload sayfa işleyicisine gönderilir ve koşullu bloklar yüklenen resim önizlemesini, çözümlenen sonucu veya bir hata mesajını görüntüler.

Örnek Giriş Barkodları

Taramayı test etmek için aşağıdaki örnek barkodlar kullanılabilir. Her resim farklı bir format ve değer kodlar:

"https://ironsoftware.com" kodlayan QR Kod

Kod 128 barkod şifreleme "IronBarcode-2026"

"HELLO123" kodlayan Code 39 barkodu

IronBarcode ile Barkod Taraması

Sunucu tarafı mantığı, yüklenen dosyayı OnPostUploadAsync yönteminde işler. Yüklenen IFormFile bayt dizisine okunur ve doğrudan BarcodeReader.Read'ya iletilir. Bu, geçici dosyaların kaydedilmesini önler ve işlemi tamamen bellekte tutar.

Index.cshtml.cs dosyasındaki içeriği şu şekilde değiştirin:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}

Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks

Public Class IndexModel
    Inherits PageModel

    <BindProperty>
    Public Property UploadedFile As IFormFile

    Public Property BarcodeResult As String
    Public Property ErrorMessage As String
    Public Property ImageDataUrl As String

    Public Sub OnGet()
    End Sub

    Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
        If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
            ErrorMessage = "Please select an image file."
            Return Page()
        End If

        Try
            Using ms As New MemoryStream()
                Await UploadedFile.CopyToAsync(ms)
                Dim imageBytes As Byte() = ms.ToArray()

                ' Store image as base64 for preview display
                Dim base64 As String = Convert.ToBase64String(imageBytes)
                ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}"

                ' Read barcode from uploaded image bytes
                Dim results = BarcodeReader.Read(imageBytes)

                If results IsNot Nothing AndAlso results.Count() > 0 Then
                    BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
                Else
                    ErrorMessage = "No barcode detected in the uploaded image."
                End If
            End Using
        Catch ex As Exception
            ErrorMessage = $"Error processing image: {ex.Message}"
        End Try

        Return Page()
    End Function
End Class

Yukarıdaki koddaki başlıca adımlar:

1. Yüklemeyi al - IFormFile, [BindProperty] yoluyla bağlanır ve POST işleyicisinde alınır.
2. Baytlara dönüştür - Dosya, bir MemoryStream'a kopyalanır ve bayt dizisine dönüştürülür. Bu, base64 dizgileri yerine ASP.NET Core'un IFormFile'u için uyarlanmış web tarayıcı örneğinde kullanılan aynı yaklaşımdır.
3. Barkodu oku - BarcodeReader.Read(imageBytes) resmi işler ve algılanan tüm barkodları döndürür.
4. Sonucu görüntüle - Algılanan tüm barkod değerleri birleştirilir ve arayüzde görüntülenir.

Aşağıdaki GIF, bir barkod resmi yükleyip çözülen sonucu göstererek barkod okuyucunun nasıl çalıştığını göstermektedir:

ASP.NET Core uygulamasında yüklenen bir barkod görüntüsünü tarayan barkod okuyucu

Base64 Resim Verilerini İşleme

Görüntü verilerini base64 dizgeleri olarak alan uygulamalar için (örneğin, web kamerası çekimlerinden veya JavaScript tuvali), aynı BarcodeReader.Read yöntemi base64'den çözülen bayt dizileri ile çalışır. Bu desen, görüntü verilerini AJAX ile gönderen tek sayfalık uygulamalarda yaygındır.

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}

Public Function ReadBarCode(imageDataBase64 As String) As String
    ' Decode the base64 image data
    Dim splitObject = imageDataBase64.Split(","c)
    Dim imageByteData As Byte() = Convert.FromBase64String(
        If(splitObject.Length > 1, splitObject(1), splitObject(0)))

    ' Read barcode directly from byte array
    Dim results = BarcodeReader.Read(imageByteData)

    Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function

Bu yaklaşım, virgül üzerinde bölme yaparak ve gerçek base64 yükünü alarak hem ham base64 hem de veri URI formatlarını (örneğin, data:image/png;base64,...) ele alır. Bu deseni kullanarak tam bir Blazor uygulaması için Blazor entegrasyon kılavuzunu inceleyin.

Sunucuda Barkod Üretimi

IronBarcode sunucu tarafında da barkod üretebilir. Aynı uygulamaya bir üretim uç noktası eklemek BarcodeWriter.CreateBarcode ile kolaydır:

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}

Public Function OnPostGenerate() As IActionResult
    Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
    Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()

    Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function

Üretilen barkod, bir dosya indirimi olarak döndürülür. Aşağıdaki resim, OnPostGenerate işleyici tarafından üretilen QR kodu çıktısını göstermektedir:

BarcodeWriter.CreateBarcode ile sunucu tarafında üretilen QR kod

Daha fazla barkod üretim seçeneği için barkod resmi üretim kılavuzuna ve barkod stilini özelleştirme kılavuzuna bakın.

Uygulamayı Çalıştırma

Projeyi Visual Studio'dan veya komut satırından çalıştırın:

dotnet run

dotnet run

Uygulama, genellikle https://localhost:5001 veya benzeri ile belirtilen launchSettings.json bağlantı noktasında başlar. Barkod tarayıcı arabirimini görmek için ana sayfaya gidin.