Scanner de codes-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éez 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 à partir de 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 de gestion des packages NuGet. Naviguez vers Tools > NuGet Package Manager > Package Manager Console dans Visual Studio et exécutez :

Install-Package BarCode

Sinon, installez-le à partir de la ligne de commande avec dotnet add package BarCode. La dernière version est disponible sur le site 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 dans le 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 mise en page utilise les classes Bootstrap déjà incluses dans le modèle par défaut ASP.NET Core. Le formulaire soumet à la 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 codes-barres d'exemple 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"

Code 128 encodant "IRONBARCODE-2026"

Code 39 encodant "HELLO123"

Scan de 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 passé directement à BarcodeReader.Read. Cela évite de sauvegarder des fichiers temporaires et maintient 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. Recevez le téléchargement - L'IFormFile est lié via [BindProperty] et reçu dans le gestionnaire POST.
2. Convertissez en octets - Le fichier est copié dans un MemoryStream et converti en un tableau d'octets. C'est la même approche utilisée dans l'exemple de scanner web, adapté pour l'IFormFile d'ASP.NET Core au lieu des chaînes base64.
3. Lisez le code-barres - BarcodeReader.Read(imageBytes) traite l'image et retourne tous les codes-barres détectés.
4. Affichez le résultat - Toutes les valeurs des codes-barres détectés sont jointes et affichées dans l'interface utilisateur.

Le GIF suivant 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 code-barres scannant une image téléchargée dans l'application ASP.NET Core

Traitement de données d'image en base64

Pour les applications qui reçoivent des données d'image sous forme de chaînes base64 (par exemple, des captures de webcam ou canvas JavaScript), la même méthode BarcodeReader.Read fonctionne avec les tableaux d'octets décodés du base64. Ce modèle est courant dans les applications monopage 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 gère à la fois le base64 brut et les formats de données URI (par exemple, data:image/png;base64,...) en se séparant sur la virgule et en prenant la charge utile base64 réelle. Pour une implémentation Blazor complète utilisant ce modèle, voir le guide d'intégration Blazor.

Génération de codes-barres sur le serveur

IronBarcode peut également générer des codes-barres 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 retourné en tant que téléchargement de fichier. L'image suivante montre la sortie du QR code produit 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, voir le tutoriel de génération d'images de code-barres et le guide de style de code-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 (typiquement https://localhost:5001 ou similaire). Naviguez vers la page d'accueil pour voir l'interface du scanner de codes-barres.