Leitor de Código de Barras ASP.NET Core

This article was translated from English: Does it need improvement?
Translated
View the article in English

Introdução

ASP.NET Core é uma estrutura multi-plataforma para construir aplicações web modernas. Seu modelo de Razor Pages oferece uma abordagem baseada em página para lidar com solicitações HTTP, o que o torna bem adequado para processamento de código de barras do lado do servidor. Com o IronBarcode, as imagens carregadas podem ser recebidas como objetos IFormFile, convertidas em arrays de bytes e passadas diretamente para o leitor de código de barras sem escrever arquivos temporários no disco.

Este artigo explica como integrar o IronBarcode em uma aplicação ASP.NET Core Razor Pages para escanear códigos de barras e códigos QR a partir de imagens carregadas, bem como gerar códigos de barras a partir do servidor.

IronBarcode: Biblioteca C# para Código de Barras

IronBarcode fornece uma API robusta para ler e escrever códigos de barras em aplicações .NET. A biblioteca lida com o processamento de imagens internamente, para que os desenvolvedores possam passar bytes brutos, caminhos de arquivos ou streams diretamente para o método BarcodeReader.Read sem precisar de bibliotecas de processamento de imagem separadas. Ele suporta uma ampla gama de formatos de código de barras, incluindo QR Code, Code 128, Code 39, PDF417, EAN e muitos outros.

Para aplicativos web, o IronBarcode é particularmente útil porque processa imagens inteiramente na memória. Os arquivos enviados nunca precisam ser salvos no disco, o que simplifica a implantação e reduz a sobrecarga de limpeza. A mesma biblioteca também gera códigos de barras com BarcodeWriter.CreateBarcode, tornando-a uma dependência única tanto para leitura quanto para escrita.

Passos para Construir um Scanner de Código de Barras no ASP.NET Core

Siga estes passos para criar um scanner de código de barras baseado na web usando ASP.NET Core Razor Pages e IronBarcode.

Pré-requisitos

  1. Visual Studio 2022 ou posterior (ou qualquer IDE com suporte ao .NET)
  2. .NET 6.0 ou SDK posterior

Crie o Projeto

Crie um novo projeto ASP.NET Core Web App (Razor Pages). Isso pode ser feito através do assistente de projeto do Visual Studio ou pela linha de comando:

dotnet new webapp -n BarcodeWebApp
dotnet new webapp -n BarcodeWebApp
SHELL

Instalar a Biblioteca IronBarcode

Instale a biblioteca IronBarcode usando o Console do Gerenciador de Pacotes NuGet. Navegue para Tools > NuGet Package Manager > Package Manager Console no Visual Studio e execute:

Install-Package BarCode

Alternativamente, instale-a a partir da linha de comando com dotnet add package BarCode. A versão mais recente está disponível no site do NuGet.

Frontend

O frontend consiste em um formulário de upload de arquivos e uma área de exibição de resultados. O formulário usa enctype="multipart/form-data" para lidar com uploads de arquivos binários. Quando um código de barras é detectado, o resultado aparece em um alerta de sucesso abaixo da imagem enviada.

Substitua o conteúdo no arquivo Index.cshtml com o seguinte:

@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

O layout usa classes Bootstrap já incluídas no modelo padrão do ASP.NET Core. O formulário envia para o manipulador de página Upload, e blocos condicionais exibem a pré-visualização da imagem carregada, o resultado decodificado ou uma mensagem de erro.

Amostras de Entrada de Códigos de Barras

Os seguintes códigos de barras de exemplo podem ser usados para testar o scanner. Cada imagem codifica um formato e valor diferentes:

ASP.NET Core Barcode Scanner - Sample QR Code input encoding a URL

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

ASP.NET Core Barcode Scanner - Sample Code 128 barcode input

Código de barras Code 128 codificando "IRONBARCODE-2026"

ASP.NET Core Barcode Scanner - Sample Code 39 barcode input

Código de barras Code 39 codificando "HELLO123"

Scanner de Código de Barras com IronBarcode

A lógica do lado do servidor lida com o arquivo carregado no método OnPostUploadAsync. O IFormFile carregado é lido em um array de bytes, que é passado diretamente para BarcodeReader.Read. Isso evita salvar arquivos temporários e mantém o processamento inteiramente na memória.

Substitua o conteúdo em Index.cshtml.cs por:

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

Os passos principais no código acima:

  1. Receber o upload - O IFormFile é associado via [BindProperty] e recebido no manipulador POST.
  2. Converter em bytes - O arquivo é copiado para um MemoryStream e convertido em um array de bytes. Esta é a mesma abordagem usada no exemplo de scanner web, adaptada para o IFormFile do ASP.NET Core em vez de strings base64.
  3. Ler o código de barras - BarcodeReader.Read(imageBytes) processa a imagem e retorna todos os códigos de barras detectados.
  4. Exibir o resultado – Todos os valores dos códigos de barras detectados são unidos e exibidos na UI.

O GIF a seguir demonstra o leitor de código de barras em ação, enviando uma imagem de código de barras e exibindo o resultado decodificado:

ASP.NET Core Barcode Scanner - Demonstration of uploading and reading a barcode

Leitor de código de barras escaneando uma imagem enviada no aplicativo ASP.NET Core

Processamento de Dados de Imagem Base64

Para aplicações que recebem dados de imagem como strings base64 (por exemplo, de capturas de webcam ou canvas JavaScript), o mesmo método BarcodeReader.Read funciona com arrays de bytes decodificados de base64. Este padrão é comum em aplicações de página única que enviam dados de imagem 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})";
}
$vbLabelText   $csharpLabel

Esta abordagem lida tanto com formatos base64 brutos quanto formatos de URI de dados (por exemplo, data:image/png;base64,...) separando na vírgula e pegando a carga base64 real. Para uma implementação Blazor completa usando esse padrão, consulte o guia de integração Blazor.

Gerando Códigos de Barras no Servidor

IronBarcode também pode gerar códigos de barras no lado do servidor. Adicionar um endpoint de geração à mesma aplicação é simples com 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");
}
$vbLabelText   $csharpLabel

O código de barras gerado é retornado como um download de arquivo. A imagem a seguir mostra a saída do código QR produzida pelo manipulador OnPostGenerate:

ASP.NET Core Barcode Scanner - Server-generated QR code output

Código QR gerado no lado do servidor com BarcodeWriter.CreateBarcode

Para mais opções de geração de código de barras, veja o tutorial de geração de imagem de código de barras e o guia de estilo do código de barras.

Executando o aplicativo

Execute o projeto a partir do Visual Studio ou da linha de comando:

dotnet run
dotnet run
SHELL

A aplicação inicia na porta especificada em launchSettings.json (normalmente https://localhost:5001 ou similar). Navegue até a página inicial para ver a interface do scanner de código de barras.

Conclusão

Este artigo demonstrou como construir um scanner de código de barras no lado do servidor usando ASP.NET Core Razor Pages e IronBarcode. A mesma abordagem funciona com controladores ASP.NET Core MVC, pontos de extremidade Web API, e aplicações Blazor Server adaptando como os dados da imagem são recebidos. IronBarcode lida com o processamento de imagem internamente, então a integração requer código mínimo, independentemente do framework web.

Para leitura de códigos de barras em outras plataformas .NET, veja o tutorial de scanner de código de barras em .NET MAUI e os guias de como ler códigos de barras. Obtenha mais tutoriais sobre IronBarcode no tutorial de leitura de códigos de barras.

To get started quickly, download the complete BarcodeWebApp project and run it with dotnet run.

IronBarcode deve ser licenciado para uso em desenvolvimento e comercial. Detalhes sobre licenciamento estão disponíveis aqui.

Perguntas frequentes

Como posso implementar um leitor de código de barras em ASP.NET Core usando Razor Pages?

Você pode usar o IronBarcode em seu projeto ASP.NET Core Razor Pages para implementar um leitor de código de barras. A biblioteca permite que você leia vários formatos de código de barras, como códigos QR, Code 128 e Code 39, fazendo upload de imagens e processando-as com BarcodeReader.Read.

Quais tipos de códigos de barras podem ser lidos usando o IronBarcode?

O IronBarcode suporta a leitura de múltiplos formatos de código de barras, incluindo códigos QR, Code 128 e Code 39, tornando-o versátil para várias aplicações.

Como faço para fazer upload de imagens para digitalização de códigos de barras em um projeto ASP.NET Core?

Em um projeto ASP.NET Core, você pode fazer upload de imagens usando IFormFile. IronBarcode processa essas imagens para ler os códigos de barras contidos nelas.

O IronBarcode pode gerar códigos de barras do lado do servidor em ASP.NET Core?

Sim, o IronBarcode pode gerar códigos de barras do lado do servidor em ASP.NET Core usando o método BarcodeWriter.CreateBarcode, permitindo a criação e exibição de códigos de barras dinamicamente.

Para que serve o método BarcodeReader.Read?

O método BarcodeReader.Read no IronBarcode é usado para decodificar códigos de barras de imagens, sendo uma parte crucial na implementação de um leitor de códigos de barras em ASP.NET Core.

É possível escanear tanto códigos QR quanto códigos de barras usando a mesma biblioteca em ASP.NET Core?

Sim, o IronBarcode permite escanear tanto códigos QR quanto vários outros formatos de código de barras dentro da mesma aplicação ASP.NET Core, fornecendo uma solução unificada.

Quais são os benefícios de usar o IronBarcode para digitalização de códigos de barras em C#?

O IronBarcode oferece fácil integração, suporte para múltiplos formatos de código de barras e capacidades robustas de geração de códigos de barras do lado do servidor, tornando-o uma escolha eficiente para digitalização de códigos de barras em aplicações C#.

Curtis Chau
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais
Pronto para começar?
Nuget Downloads 2,108,094 | Versão: 2026.3 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package BarCode
executar um exemplo Veja seu fio se transformar em um código de barras.