ASP.NET Core Barkod Tarayıcı

Önkoşullar

1. Visual Studio 2022 veya daha sonraki bir sürümü (veya .NET desteği olan herhangi bir IDE)
2. .NET 6.0 veya daha yeni SDK

Projeyi Oluştur

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

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

IronBarcode Kütüphanesini Yükle

IronBarcode kütüphanesini NuGet Paket Yöneticisi Konsolu aracılığıyla yükleyin. Visual Studio'da Tools > NuGet Package Manager > Package Manager Console adresine 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 mevcuttur.

Ön Yüz

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

Index.cshtml dosyasının içeriğini aşağıdaki ile 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, zaten varsayılan ASP.NET Core szeması içindeki Bootstrap sınıflarını kullanır. Form, Upload sayfa işleyicisine gönderilir ve yüklenen görüntü önizlemesi, çözülmüş sonuç veya bir hata mesajı koşullu bloklarla gösterilir.

Örnek Giriş Barkodları

Aşağıdaki örnek barkodlar, tarayıcıyı test etmek için kullanılabilir. Her bir resim farklı bir format ve değeri kodlar:

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

"IRONBARCODE-2026" kodlayan Code 128 barkodu

"HELLO123" kodlayan Code 39 barkodu

IronBarcode ile Barkod Tarama

Sunucu tarafı mantık, yüklenen dosyayı OnPostUploadAsync yönteminde işler. Yüklenen IFormFile bir bayt dizisine okunur ve doğrudan BarcodeReader.Read yönteme geçilir. Bu, geçici dosyaların kaydedilmesini önler ve işleme tamamen bellekte kalır.

Index.cshtml.cs içeriğini 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 ana adımlar:

1. Yüklemeyi al - IFormFile, [BindProperty] ile bağlanır ve POST işleyicisinde alınır.
2. Baytlara dönüştür - Dosya bir MemoryStream kopyalanır ve bir bayt dizisine dönüştürülür. Bu, web tarayıcı örneğinde kullanılan aynı yaklaşımdır, base64 dizeleri yerine ASP.NET Core'un IFormFile için uyarlanmıştır.
3. Barkodu oku - BarcodeReader.Read(imageBytes) görüntüyü işler ve tüm tespit edilen barkodları döndürür.
4. Sonucu göster - Tüm algılanan barkod değerleri birleştirilir ve UI'da gösterilir.

Aşağıdaki GIF, bir barkod görüntüsü yükleyip kod çözme sonucunu gösteren barkod okuyucunun çalışmasını göstermektedir:

ASP.NET Core uygulamasında yüklenen bir görseli tarayan barkod okuyucu

Base64 Görsel Verisinin İşlenmesi

Görüntü verilerini base64 dizeleri olarak alan uygulamalar için (örneğin web kamerası çekimleri veya JavaScript tuvali), aynı BarcodeReader.Read yöntemi base64'ten çözülen bayt dizileri ile çalışır. Bu desen, AJAX üzerinden görüntü verilerini gönderen tek sayfa uygulamalarında 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 ayırarak ve gerçek base64 yükünü alarak hem ham base64 hem de veri URI formatlarını (örneğin, data:image/png;base64,...) işler. Bu model kullanan tam bir Blazor uygulaması için, Blazor entegrasyon rehberine bakın.

Sunucuda Barkod Üretme

IronBarcode sunucu tarafında da barkodlar oluşturabilir. Aynı uygulamaya bir oluşturma 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 indirme olarak döndürüldü. Aşağıdaki resim, OnPostGenerate işleyicisi tarafından üretilen QR kodu çıktısını göstermektedir:

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

Daha fazla barkod üretim seçeneği için, barkod görsel üretim rehberine ve barkod stil rehberine bakın.

Uygulamayı Çalıştırma

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

dotnet run

dotnet run

Uygulama launchSettings.json'da belirtilen portta başlar (genellikle https://localhost:5001 veya benzeri). Barkod tarayıcı arayüzünü görmek için ana sayfaya gidin.