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äter 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 Befehlszeile geschehen:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

IronBarcode-Bibliothek installieren

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

Install-Package BarCode

Alternativ können Sie es über die Befehlszeile 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 Ergebnis-Anzeigebereich. Das Formular verwendet enctype="multipart/form-data" zur Verarbeitung von Uploads binärer Dateien. Wenn ein Barcode erkannt wird, erscheint das Ergebnis in einem Erfolgs-Alert unter dem hochgeladenen Bild.

Ersetzen Sie den Inhalt 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 Bootstrap-Klassen, die bereits in der standardmäßigen ASP.NET Core-Vorlage enthalten sind. Das Formular wird an den Seitenhandler Upload übermittelt, und bedingte Blöcke zeigen die Vorschau des hochgeladenen Bildes, das dekodierte Ergebnis oder eine Fehlermeldung an.

Beispiel-Input-Barcodes

Die folgenden Beispielbarcodes können verwendet werden, um den Scanner zu testen. Jedes Bild codiert ein anderes Format und einen anderen Wert:

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

Code 128 Barcode kodiert "IronBarcode-2026"

Code 39 Barcode kodiert "HELLO123"

Barcode-Scannen mit IronBarcode

Die serverseitige Logik verarbeitet die hochgeladene Datei in der Methode OnPostUploadAsync. Das hochgeladene IFormFile wird in ein Byte-Array eingelesen, 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();
    }
}

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

Die Schlüsselschritte im obigen Code:

1. Upload empfangen – Der IFormFile wird über [BindProperty] gebunden und im POST-Handler empfangen.
2. In Bytes konvertieren – Die Datei wird in ein MemoryStream kopiert und in ein Byte-Array konvertiert. Dies ist derselbe Ansatz wie im Web-Scanner-Beispiel, angepasst an ASP.NET Core's IFormFile anstelle von Base64-Zeichenfolgen.
3. Barcode lesen – BarcodeReader.Read(imageBytes) verarbeitet das Bild und gibt alle erkannten Barcodes zurück.
4. Ergebnis anzeigen - Alle erkannten Barcode-Werte werden zusammengefügt und in der Benutzeroberfläche angezeigt.

Das folgende GIF zeigt den Barcode-Leser in Aktion, wie ein Barcode-Bild hochgeladen und das entschlüsselte Ergebnis angezeigt wird:

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

Verarbeitung von Base64-Bilddaten

Für Anwendungen, die Bilddaten als Base64-Zeichenfolgen empfangen (z. B. von Webcam-Aufnahmen oder JavaScript-Canvas), funktioniert dieselbe BarcodeReader.Read-Methode mit aus Base64 dekodierten Byte-Arrays. Dieses Muster ist in Single-Page-Anwendungen üblich, die Bilddaten über AJAX senden:

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

Dieser Ansatz verarbeitet sowohl rohe Base64- als auch Daten-URI-Formate (z. B. data:image/png;base64,...), indem er an der Kommastelle trennt und die eigentliche Base64-Nutzlast übernimmt. Für eine vollständige Blazor-Implementierung, die dieses Muster verwendet, siehe den Blazor-Integrationsleitfaden.

Erstellen von Barcodes auf dem Server

IronBarcode kann BarCodes auch serverseitig generieren. Das Hinzufügen eines Generierungs-Endpunkts zur gleichen Anwendung ist mit BarcodeWriter.CreateBarcode ganz einfach:

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

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 generiert

Weitere Optionen zur Barcode-Erstellung finden Sie im Barcode-Bilderzeugungs-Tutorial und im Barcode-Styling-Leitfaden.

Ausführung der Anwendung

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

dotnet run

dotnet run

Die Anwendung startet auf dem in launchSettings.json angegebenen Port (in der Regel https://localhost:5001 oder ähnlich). Navigieren Sie zur Startseite, um die Barcode-Scanner-Schnittstelle zu sehen.