Lecteur de code-barres ASP.NET Core

Prérequis

1. Visual Studio 2022 ou plus récent (ou tout IDE avec support .NET)
2. SDK .NET 6.0 ou plus récent

Créer le projet

Créez un nouveau projet ASP.NET Core Web App (Razor Pages). Cela peut être fait via l'assistant de projet de Visual Studio ou depuis la ligne de commande :

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

Installer la bibliothèque IronBarcode

Installez la bibliothèque IronBarcode en utilisant la console du Package Manager NuGet. Accédez à Tools > NuGet Package Manager > Package Manager Console dans Visual Studio et exécutez :

Install-Package BarCode

Vous pouvez également l'installer à partir de la ligne de commande avec dotnet add package BarCode. La dernière version est disponible sur le site de NuGet.

Frontend

Le frontend se compose d'un formulaire de téléchargement de fichiers et d'une zone d'affichage des résultats. Le formulaire utilise enctype="multipart/form-data" pour gérer les téléchargements de fichiers binaires. Lorsqu'un code-barres est détecté, le résultat apparaît dans une alerte de succès sous l'image téléchargée.

Remplacez le contenu du fichier Index.cshtml par ce qui suit :

@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

La disposition utilise les classes Bootstrap déjà incluses dans le modèle ASP.NET Core par défaut. Le formulaire est soumis au gestionnaire de page Upload, et des blocs conditionnels affichent l'aperçu de l'image téléchargée, le résultat décodé ou un message d'erreur.

Exemples de codes-barres d'entrée

Les exemples de codes-barres suivants peuvent être utilisés pour tester le scanner. Chaque image encode un format et une valeur différents :

QR Code encodant "https://ironsoftware.com"

Encodage de code-barres Code 128 "IronBarcode-2026"

Code 39 code-barres encodant "HELLO123"

Scanner des codes-barres avec IronBarcode

La logique côté serveur gère le fichier téléchargé dans la méthode OnPostUploadAsync. Le fichier IFormFile téléchargé est lu dans un tableau d'octets, qui est transmis directement à BarcodeReader.Read. Cela évite de sauvegarder des fichiers temporaires et garde le traitement entièrement en mémoire.

Remplacez le contenu dans Index.cshtml.cs par :

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

Les étapes clés dans le code ci-dessus :

1. Réception du téléchargement - Le IFormFile est lié via [BindProperty] et reçu dans le gestionnaire POST.
2. Conversion en octets - Le fichier est copié dans un MemoryStream et converti en un tableau d'octets. Il s'agit de la même approche que celle utilisée dans l'exemple du scanner web, adaptée pour IFormFile d'ASP.NET Core au lieu des chaînes base64.
3. Lire le BARCODE - BarcodeReader.Read(imageBytes) traite l'image et renvoie tous les BARCODES détectés.
4. Afficher le résultat - Toutes les valeurs de code-barres détectées sont jointes et affichées dans l'interface utilisateur.

Le GIF suivant démontre le lecteur de code-barres en action, téléchargeant une image de code-barres et affichant le résultat décodé :

Lecteur de codes-barres scannant une image téléchargée dans l'application ASP.NET Core

Traitement des données d'images Base64

Pour les applications qui reçoivent des données d'image sous forme de chaînes base64 (par exemple, à partir de captures de webcam ou de canevas JavaScript), la même méthode BarcodeReader.Read fonctionne avec des tableaux d'octets décodés à partir de base64. Ce modèle est courant dans les applications monopages qui envoient des données d'image via AJAX :

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

Cette approche prend en charge à la fois les formats bruts base64 et les formats URI de données (par exemple, data:image/png;base64,...) en effectuant une segmentation au niveau de la virgule et en récupérant la charge utile base64 réelle. Pour une implémentation complète avec Blazor utilisant ce modèle, consultez le guide d'intégration Blazor.

Générer des codes-barres sur le serveur

IronBarcode peut également générer des BARCODES côté serveur. L'ajout d'un point de terminaison de génération à la même application est simple avec 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

Le code-barres généré est renvoyé sous forme de téléchargement de fichier. L'image suivante montre le code QR généré par le gestionnaire OnPostGenerate :

QR code généré côté serveur avec BarcodeWriter.CreateBarcode

Pour plus d'options de génération de codes-barres, consultez le tutoriel de génération d'images de codes-barres et le guide de style de codes-barres.

Exécution de l'application

Exécutez le projet à partir de Visual Studio ou de la ligne de commande :

dotnet run

dotnet run

L'application démarre sur le port spécifié dans launchSettings.json (généralement https://localhost:5001 ou similaire). Naviguez vers la page d'accueil pour voir l'interface du scanner de codes-barres.