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 konumuna gidin ve şunu çalıştırın:

Install-Package BarCode

Alternatif olarak, dotnet add package BarCode ile komut satırından 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 işlemek için enctype="multipart/form-data" kullanır. 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 görüntünün önizlemesini, kod çözülmüş 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ığı, OnPostUploadAsync yönteminde yüklenen dosyayı işler. Yüklenen IFormFile bir bayt dizisine okunur ve bu dizi doğrudan BarcodeReader.Read'ye aktarılır. 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] aracılığıyla bağlanır ve POST işleyicisinde alınır.
2. Baytlara dönüştür - Dosya bir MemoryStream dosyasına kopyalanır ve bir bayt dizisine dönüştürülür. Bu, web tarayıcı örneğinde kullanılan yaklaşımın aynısıdır, ancak base64 dizeleri yerine ASP.NET Core'un IFormFile öğesine uyarlanmıştır.
3. BARCODE oku - BarcodeReader.Read(imageBytes) görüntüyü işler ve algılanan tüm BARCODE'ları 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 dizeleri olarak alan uygulamalar için (örneğin, web kamerası yakalamaları veya JavaScript canvas'tan), aynı BarcodeReader.Read yöntemi, base64'ten kod çözülmüş bayt dizileriyle de çalışır. Bu model, AJAX aracılığıyla görüntü verileri 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ülle bölerek ve gerçek base64 yükünü alarak hem ham base64 hem de veri URI biçimlerini (ör. data:image/png;base64,...) işler. Bu deseni kullanarak tam bir Blazor uygulaması için Blazor entegrasyon kılavuzunu inceleyin.

Sunucuda Barkod Üretimi

IronBarcode, sunucu tarafında da BarCode'lar oluşturabilir. BarcodeWriter.CreateBarcode ile aynı uygulamaya bir oluşturma uç noktası eklemek çok basittir:

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 görüntü, OnPostGenerate işleyicisi 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, launchSettings.json içinde belirtilen bağlantı noktasında (genellikle https://localhost:5001 veya benzeri) başlar. Barkod tarayıcı arabirimini görmek için ana sayfaya gidin.