ASP.NET Core Barcode Scanner

Voraussetzungen

1. Visual Studio 2022 oder später (oder jede IDE mit .NET-Unterstützung)
2. .NET 6.0 oder späteres SDK

Erstellen Sie das Projekt

Erstellen Sie ein neues ASP.NET Core Web App (Razor Pages) Projekt. Dies kann über den Projektassistenten von Visual Studio oder über die Kommandozeile erfolgen:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

IronBarcode-Bibliothek installieren

Installieren Sie die IronBarcode-Bibliothek mit der NuGet-Paketverwaltungskonsole. Navigieren Sie zu Tools > NuGet Package Manager > Package Manager Console in Visual Studio und führen Sie aus:

Install-Package BarCode

Alternativ können Sie es über die Kommandozeile mit dotnet add package BarCode installieren. Die neueste Version ist auf der NuGet-Website verfügbar.

Frontend

Das Frontend besteht aus einem Datei-Upload-Formular und einem Anzeigebereich für die Ergebnisse. Das Formular verwendet enctype="multipart/form-data" um binäre Dateiuploads zu handhaben. Wenn ein Barcode erkannt wird, erscheint das Ergebnis in einem Erfolgsalarm unterhalb des hochgeladenen Bildes.

Ersetzen Sie den Inhalt in der Index.cshtml-Datei durch Folgendes:

@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

Das Layout verwendet bereits im Standard-ASP.NET Core-Template enthaltene Bootstrap-Klassen. Das Formular sendet an den Upload Seitenhandler, und bedingte Blöcke zeigen die hochgeladene Bildvorschau, das dekodierte Ergebnis oder eine Fehlermeldung an.

Beispiel-Barcodes für Eingaben

Die folgenden Beispiel-Barcodes können zur Überprüfung des Scanners verwendet werden. Jedes Bild kodiert ein anderes Format und einen anderen Wert:

QR-Code, der "https://ironsoftware.com" kodiert

Code 128 Barcode, der "IRONBARCODE-2026" kodiert

Code 39 Barcode, der "HELLO123" kodiert

Barcode-Scannen mit IronBarcode

Die serverseitige Logik verarbeitet die hochgeladene Datei in der OnPostUploadAsync Methode. Die hochgeladene IFormFile wird in ein Byte-Array gelesen, das direkt an BarcodeReader.Read übergeben wird. Dies vermeidet das Speichern temporärer Dateien und hält die Verarbeitung vollständig im Speicher.

Ersetzen Sie den Inhalt in Index.cshtml.cs mit:

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();
    }
}

Die wichtigsten Schritte im obigen Code:

1. Empfangen Sie den Upload - Der IFormFile ist über [BindProperty] gebunden und wird im POST-Handler empfangen.
2. In Bytes konvertieren - Die Datei wird in ein MemoryStream kopiert und in ein Byte-Array konvertiert. Dies ist der gleiche Ansatz, der im Beispiel des Webscanners verwendet wird, angepasst für ASP.NET Core's IFormFile anstelle von Base64-Strings.
3. Den Barcode lesen - BarcodeReader.Read(imageBytes) verarbeitet das Bild und gibt alle erkannten Barcodes zurück.
4. Das Ergebnis anzeigen - Alle erkannten Barcode-Werte werden verbunden und in der Benutzeroberfläche angezeigt.

Das folgende GIF zeigt den Barcodeleser in Aktion, indem ein Barcode-Bild hochgeladen und das dekodierte Ergebnis angezeigt wird:

Barcodeleser scannt ein hochgeladenes Bild in der ASP.NET Core-Anwendung

Verarbeitung von Base64-Bilddaten

Für Anwendungen, die Bilddaten als Base64-Strings erhalten (z.B. von Webcam-Aufnahmen oder JavaScript-Canvas), funktioniert die gleiche BarcodeReader.Read Methode mit Byte-Arrays, die aus Base64 dekodiert sind. Dieses Muster ist in Einzelseitenanwendungen, die Bilddaten über AJAX senden, üblich:

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})";
}

Dieser Ansatz bearbeitet sowohl rohe Base64- als auch Daten-URI-Formate (z.B. data:image/png;base64,...), indem der String bei einem Komma aufgeteilt und die eigentliche Base64-Nutzlast entnommen wird. Für eine vollständige Blazor-Implementierung mit diesem Muster siehe den Blazor-Integrationsleitfaden.

Erstellen von Barcodes auf dem Server

IronBarcode kann auch serverseitig Barcodes erstellen. Das Hinzufügen eines Erstellungsendpunkts zur gleichen Anwendung ist mit BarcodeWriter.CreateBarcode unkompliziert:

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");
}

Der generierte Barcode wird als Dateidownload zurückgegeben. Das folgende Bild zeigt die vom OnPostGenerate Handler erzeugte QR-Code-Ausgabe:

QR-Code, serverseitig mit BarcodeWriter.CreateBarcode erstellt

Für weitere Optionen zur Barcode-Erstellung sehen Sie sich das Barcode-Bilderstellungstutorial und den Barcode-Stylingleitfaden an.

Ausführung der Anwendung

Führen Sie das Projekt aus Visual Studio oder der Kommandozeile aus:

dotnet run

dotnet run

Die Anwendung startet auf dem in launchSettings.json angegebenen Port (typischerweise https://localhost:5001 oder ähnlich). Navigieren Sie zur Startseite, um die Barcodescanner-Oberfläche zu sehen.