ASP.NET Core 条码扫描器

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

简介

ASP.NET Core 是一个用于构建现代 Web 应用程序的跨平台框架。 其 Razor Pages 模型提供了一种页面为基础的处理 HTTP 请求的方法,非常适合服务器端条码处理。 借助 IronBarcode,上传的图像可作为 IFormFile 对象接收,转换为字节数组,并直接传递给 BARCODE 阅读器,无需将临时文件写入磁盘。

本文演示了如何将 IronBarcode 集成到 ASP.NET Core Razor Pages 应用程序中,以扫描上传图像中的条码和 QR 码,并从服务器生成条码。

IronBarcode: C#条码库

IronBarcode 为 .NET 应用程序提供了一个强大的读写条码的 API。 该库在内部处理图像处理,因此开发人员可以直接将原始字节、文件路径或流传递给 BarcodeReader.Read 方法,而无需单独的图像处理库。 它支持广泛的条码格式,包括 QR CodeCode 128Code 39PDF417EAN 等。

对于 Web 应用程序,IronBarcode 特别有用,因为它完全在内存中处理图像。 上传的文件不需要保存到磁盘,这简化了部署并减少了清理的工作量。 该库还支持生成 BarcodeWriter.CreateBarcode BARCODE,使其成为读写功能的单一依赖项。

在 ASP.NET Core 中构建条码扫描器的步骤

按照以下步骤使用 ASP.NET Core Razor Pages 和 IronBarcode 创建一个基于 Web 的条码扫描器。

前提条件

  1. Visual Studio 2022 或更高版本(或任何支持 .NET 的 IDE)
  2. .NET 6.0 或更高版本的 SDK

创建项目

创建一个新的 ASP.NET Core Web App (Razor Pages) 项目。 这可以通过 Visual Studio 的项目向导或命令行完成:

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

安装 IronBarcode 库

通过 NuGet 包管理器控制台安装 IronBarcode 库。 在 Visual Studio 中导航至 Tools > NuGet Package Manager > Package Manager Console 并运行:

Install-Package BarCode

或者,您也可以通过命令行使用 dotnet add package BarCode 进行安装。 最新版本可在 NuGet 网站 上获取。

前端

前端由文件上传表单和结果显示区域组成。 该表单使用 enctype="multipart/form-data" 来处理二进制文件上传。 当检测到条码时,结果将显示在上传图像下方的成功提示中。

用以下内容替换 Index.cshtml 文件中的内容:

@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

布局使用 Bootstrap 类,这些类已包含在默认的 ASP.NET Core 模板中。 表单提交至 Upload 页面处理程序,条件语句块将显示上传图片的预览、解码结果或错误信息。

示例输入条码

以下示例条码可用于测试扫描器。 每个图像编码不同的格式和值:

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

QR Code 编码 "https://ironsoftware.com"

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

编码128条码编码"IronBarcode-2026"

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

Code 39 条码编码 "HELLO123"

使用 IronBarcode 进行条码扫描

服务器端逻辑在 OnPostUploadAsync 方法中处理上传的文件。 上传的 IFormFile 会被读取到一个字节数组中,该数组会直接传递给 BarcodeReader.Read。 这避免了保存临时文件,并将处理完全保留在内存中。

用以下内容替换 Index.cshtml.cs 中的内容:

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
$vbLabelText   $csharpLabel

上述代码中的关键步骤:

  1. 接收上传数据 - IFormFile 通过 [BindProperty] 进行绑定,并在 POST 处理程序中接收。
  2. 转换为字节 - 文件被复制到 MemoryStream 并转换为字节数组。 这与网页扫描器示例采用的方法相同,只是将 base64 字符串替换为 .NET Core 的 IFormFile
  3. 读取 BARCODE - BarcodeReader.Read(imageBytes) 处理图像并返回所有检测到的 BARCODE。
  4. 显示结果 - 所有检测到的条码值被连接并显示在 UI 中。

以下 GIF 演示了条码阅读器的实际操作,上传条码图像并显示解码结果:

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

在 ASP.NET Core 应用程序中扫描上传图像的条码阅读器

处理 Base64 图像数据

对于接收 base64 字符串格式图像数据的应用程序(例如来自网络摄像头捕获或 JavaScript canvas),相同的 BarcodeReader.Read 方法同样适用于从 base64 解码得到的字节数组。这种模式在通过 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
$vbLabelText   $csharpLabel

此方法通过逗号分隔并提取实际的 base64 有效载荷,同时支持原始 base64 格式和数据 URI 格式(例如 data:image/png;base64,...)。 有关使用此模式的完整 Blazor 实现,请参见 Blazor 集成指南

在服务器上生成条码

IronBarcode 还支持在服务器端生成 BARCODE。使用 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
$vbLabelText   $csharpLabel

生成的条码以文件下载的形式返回。 下图展示了由 OnPostGenerate 处理程序生成的QR码:

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

服务器端生成 QR 码使用 BarcodeWriter.CreateBarcode

有关更多条码生成选项,请参见 条码图像生成教程条码样式指导

运行应用程序

通过 Visual Studio 或命令行运行项目:

dotnet run
dotnet run
SHELL

应用程序将在 launchSettings.json 中指定的端口上启动(通常为 https://localhost:5001 或类似端口)。 导航到主页以查看条码扫描器界面。

结论

本文展示了如何使用 ASP.NET Core Razor Pages 和 IronBarcode 构建服务器端条码扫描器。 通过调整接收图像数据的方式,同样的方法适用于 ASP.NET Core MVC 控制器、Web API 端点和 Blazor Server 应用程序。 IronBarcode 内部处理图像处理,因此无论使用哪种 Web 框架,集成都需要极少的代码。

有关在其他 .NET 平台中读取条码,请参见 .NET MAUI 条码扫描器教程条码读取指导。 获取更多有关 IronBarcode 的教程从 读取条码教程

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

IronBarcode 必须获得开发和商业使用的许可。 许可详情可在 这里 获取。

常见问题解答

如何在ASP.NET Core中使用Razor Pages实现条形码扫描器?

您可以在您的ASP.NET Core Razor Pages项目中使用IronBarcode来实现条形码扫描器。该库允许您通过上传图像并使用BarcodeReader.Read处理它们来读取各种条形码格式,如二维码、代码128和代码39。

使用IronBarcode可以读取哪些类型的条形码?

IronBarcode支持读取多种条形码格式,包括二维码、代码128和代码39,适用于各种应用程序。

如何在ASP.NET Core项目中上传图像进行条形码扫描?

在ASP.NET Core项目中,您可以使用IFormFile上传图像。IronBarcode会处理这些图像以读取其中包含的条形码。

IronBarcode可以在ASP.NET Core中服务器端生成条形码吗?

是的,IronBarcode可以在ASP.NET Core中使用BarcodeWriter.CreateBarcode方法生成服务器端条形码,允许您动态创建和显示条形码。

BarcodeReader.Read方法用于什么?

IronBarcode中的BarcodeReader.Read方法用于从图像中解码条形码,是在ASP.NET Core中实现条形码扫描器的重要部分。

是否可以使用同一个库在ASP.NET Core中扫描二维码和条形码?

是的,IronBarcode允许您在同一ASP.NET Core应用程序中扫描二维码和各种其他条形码格式,提供统一的解决方案。

在C#中使用IronBarcode进行条形码扫描的优势是什么?

IronBarcode提供简单的集成、对多种条形码格式的支持以及强大的服务器端条形码生成功能,使其成为C#应用程序中条形码扫描的高效选择。

IronBarcode能处理1D和2D条形码吗?

IronBarcode能够处理1D和2D条形码,支持从简单的产品标签到复杂的数据编码的广泛应用。

IronBarcode的商业使用有许可选项吗?

Iron Software为IronBarcode提供各种许可选项,包括企业级应用的商业许可,确保符合业务需求。

IronBarcode 支持批量处理条形码吗?

是的,IronBarcode支持批量处理,允许开发人员在一个操作中生成或读取多个条形码,提高大规模应用的效率。

Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外,Curtis 对物联网 (IoT) 有浓厚的兴趣,探索将硬件和软件集成的新方法。在空闲时间,他喜欢玩游戏和构建 Discord 机器人,将他对技术的热爱与创造力相结合。

准备开始了吗?
Nuget 下载 2,240,258 | 版本: 2026.5 just released
Still Scrolling Icon

还在滚动吗?

想快速获得证据? PM > Install-Package BarCode
运行示例 观看您的字符串变成 BarCode。