Escáner de código de barras ASP.NET Core

Prerrequisitos

1. Visual Studio 2022 o posterior (o cualquier IDE con soporte for .NET)
2. .NET 6.0 o SDK posterior

Crear el proyecto

Cree un nuevo proyecto ASP.NET Core Web App (Razor Pages). Esto se puede hacer a través del asistente de proyectos de Visual Studio o desde la línea de comandos:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

Instalar la biblioteca IronBarcode

Instalar la biblioteca IronBarcode usando la consola del Administrador de paquetes NuGet. Navegue hasta Tools > NuGet Package Manager > Package Manager Console en Visual Studio y ejecute:

Install-Package BarCode

Alternativamente, instálelo desde la línea de comandos con dotnet add package BarCode. La versión más reciente está disponible en el sitio web de NuGet.

Frontend

El frontend consiste en un formulario de carga de archivos y un área de visualización de resultados. El formulario utiliza enctype="multipart/form-data" para manejar cargas de archivos binarios. Cuando se detecta un código de barras, el resultado aparece en una alerta de éxito debajo de la imagen cargada.

Reemplace el contenido en el archivo Index.cshtml con lo siguiente:

@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

El diseño utiliza clases de Bootstrap que ya están incluidas en la plantilla predeterminada de ASP.NET Core. El formulario se envía al manejador de páginas Upload, y los bloques condicionales muestran la vista previa de la imagen cargada, el resultado decodificado o un mensaje de error.

Ejemplos de códigos de barras de entrada

Los siguientes códigos de barras de muestra pueden usarse para probar el escáner. Cada imagen codifica un formato y un valor diferente:

Código QR que codifica "https://ironsoftware.com"

Código de barras Code 128 que codifica "IRONBARCODE-2026"

Código de barras Code 39 que codifica "HELLO123"

Escaneo de códigos de barras con IronBarcode

La lógica del lado del servidor maneja el archivo cargado en el método OnPostUploadAsync. El archivo IFormFile cargado se lee en una matriz de bytes, que se pasa directamente a BarcodeReader.Read. Esto evita guardar archivos temporales y mantiene el procesamiento completamente en memoria.

Reemplace el contenido en Index.cshtml.cs con:

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

Los pasos clave en el código anterior:

1. Recibir la carga - El IFormFile se vincula a través de [BindProperty] y se recibe en el manejador POST.
2. Convertir a bytes - El archivo se copia en un MemoryStream y se convierte en una matriz de bytes. Este es el mismo enfoque utilizado en el ejemplo de escáner web, adaptado para IFormFile de ASP.NET Core en lugar de cadenas base64.
3. Leer el código de barras - BarcodeReader.Read(imageBytes) procesa la imagen y devuelve todos los códigos de barras detectados.
4. Mostrar el resultado - Todos los valores de códigos de barras detectados se unen y se muestran en la UI.

El siguiente GIF demuestra el lector de códigos de barras en acción, subiendo una imagen de código de barras y mostrando el resultado decodificado:

Lector de códigos de barras escaneando una imagen cargada en la aplicación ASP.NET Core

Procesamiento de datos de imagen Base64

Para aplicaciones que reciben datos de imagen como cadenas base64 (por ejemplo, de capturas de cámara web o canvas de JavaScript), el mismo método BarcodeReader.Read funciona con matrices de bytes decodificadas de base64. Este patrón es común en aplicaciones de una sola página que envían datos de imagen mediante 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

Este enfoque maneja tanto formatos de base64 sin procesar como de URI de datos (por ejemplo, data:image/png;base64,...) dividiendo en la coma y tomando la carga útil de base64 real. Para una implementación completa en Blazor usando este patrón, vea la guía de integración de Blazor.

Generación de códigos de barras en el servidor

IronBarcode también puede generar códigos de barras en el servidor. Agregar un punto de generación al mismo sistema es sencillo con 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

El código de barras generado se devuelve como una descarga de archivo. La siguiente imagen muestra la salida de código QR generada por el manejador OnPostGenerate:

Código QR generado en el servidor con BarcodeWriter.CreateBarcode

Para más opciones de generación de códigos de barras, vea el tutorial de generación de imágenes de códigos de barras y la guía de estilo de códigos de barras.

Ejecución de la aplicación

Ejecute el proyecto desde Visual Studio o la línea de comandos:

dotnet run

dotnet run

La aplicación comienza en el puerto especificado en launchSettings.json (típicamente https://localhost:5001 o similar). Navegue a la página de inicio para ver la interfaz de escáner de códigos de barras.