Skaner kodów kreskowych ASP.NET Core

Wymagania wstępne

1. Visual Studio 2022 lub późniejszy (lub dowolne IDE z obsługą .NET)
2. SDK .NET 6.0 lub nowszy

Utwórz projekt

Utwórz nowy projekt ASP.NET Core Web App (Razor Pages). Można to zrobić za pomocą kreatora projektów w Visual Studio lub z wiersza poleceń:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

Zainstaluj bibliotekę IronBarcode

Zainstaluj bibliotekę IronBarcode przy użyciu konsoli Menedżera pakietów NuGet. Przejdź do Tools > NuGet Package Manager > Package Manager Console w Visual Studio i uruchom:

Install-Package BarCode

Alternatywnie, zainstaluj to z wiersza poleceń za pomocą dotnet add package BarCode. Najnowsza wersja jest dostępna na stronie NuGet.

Frontend

Frontend składa się z formularza przesyłania plików i obszaru wyświetlania wyników. Formularz używa enctype="multipart/form-data" do obsługi przesyłania plików binarnych. Kiedy kod kreskowy zostanie wykryty, wynik pojawi się w alertu sukcesu poniżej przesłanego obrazu.

Zamień zawartość pliku Index.cshtml na następującą:

@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

Układ używa klas Bootstrap już zawartych w domyślnym szablonie ASP.NET Core. Formularz wysyła dane do handlera strony Upload, a bloki warunkowe wyświetlają podgląd przesłanego obrazu, zdekodowany wynik lub komunikat o błędzie.

Przykładowe kody wejściowe

Poniższe przykładowe kody mogą być użyte do przetestowania skanera. Każdy obraz koduje inny format i wartość:

Kod QR kodujący "https://ironsoftware.com"

Kod kreskowy Code 128 kodujący "IRONBARCODE-2026"

Kod kreskowy Code 39 kodujący "HELLO123"

Skanowanie kodów kreskowych z IronBarcode

Logika po stronie serwera obsługuje przesłany plik w metodzie OnPostUploadAsync. Przesłany IFormFile jest odczytywany do tablicy bajtów, która jest przekazywana bezpośrednio do BarcodeReader.Read. Dzięki temu unika się zapisywania plików tymczasowych i cały proces odbywa się w pamięci.

Zamień zawartość w Index.cshtml.cs na:

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

Kluczowe kroki w powyższym kodzie:

1. Odbierz przesłanie - IFormFile jest połączony za pomocą [BindProperty] i odbierany w handlerze POST.
2. Konwertuj na bajty - Plik jest kopiowany do MemoryStream i konwertowany do tablicy bajtów. Jest to takie samo podejście jak użyte w przykładzie skanera webowego, dostosowane do ASP.NET Core IFormFile zamiast ciągów base64.
3. Odczytaj kod kreskowy - BarcodeReader.Read(imageBytes) przetwarza obraz i zwraca wszystkie wykryte kody kreskowe.
4. Wyświetl wynik - Wszystkie wykryte wartości kodów kreskowych są łączone i wyświetlane w UI.

Poniższy GIF demonstruje działanie skanera kodów kreskowych, przesyłając obraz kodu kreskowego i wyświetlając zdekodowany wynik:

Czytnik kodów kreskowych skanuje przesłany obraz w aplikacji ASP.NET Core

Przetwarzanie danych obrazów w formacie Base64

Dla aplikacji, które otrzymują dane obrazów jako ciągi base64 (np. z przechwyceń kamer internetowych lub kanwy JavaScript), ta sama metoda BarcodeReader.Read działa z tablicami bajtów zdekodowanymi z base64. Wzorzec ten jest powszechny w jednolitych aplikacjach stron używających AJAX do przesyłania danych obrazów:

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

To podejście obsługuje zarówno surowe base64, jak i formaty URI danych (np. data:image/png;base64,...) przez rozdzielenie na przecinku i pobranie rzeczywistego ładunku base64. Dla kompletnej implementacji Blazor z użyciem tego wzorca, zobacz przewodnik integracji Blazor.

Generowanie kodów kreskowych na serwerze

IronBarcode może również generować kody kreskowe po stronie serwera. Dodanie punktu końcowego generacji do tej samej aplikacji jest prosty za pomocą BarcodeWriter.CreateBarcode:

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

Wygenerowany kod kreskowy jest zwracany jako plik do pobrania. Poniższy obraz pokazuje wynik kodu QR wygenerowany przez handler OnPostGenerate:

Kod QR wygenerowany po stronie serwera za pomocą BarcodeWriter.CreateBarcode

Dla większej ilości opcji generowania kodów kreskowych, zobacz tutorial generowania obrazów z kodami kreskowymi oraz poradnik stylizowania kodów kreskowych.

Uruchamianie aplikacji

Uruchom projekt z Visual Studio lub wiersza polecenia:

dotnet run

dotnet run

Aplikacja uruchamia się na porcie określonym w launchSettings.json (zazwyczaj https://localhost:5001 lub podobnym). Przejdź do strony głównej, aby zobaczyć interfejs skanera kodów kreskowych.