ASP.NET Core 条码扫描器
简介
ASP.NET Core 是一个用于构建现代 Web 应用程序的跨平台框架。 其 Razor Pages 模型提供了一种页面为基础的处理 HTTP 请求的方法,非常适合服务器端条码处理。 借助 IronBarcode,上传的图像可作为 IFormFile 对象接收,转换为字节数组,并直接传递给 BARCODE 阅读器,无需将临时文件写入磁盘。
本文演示了如何将 IronBarcode 集成到 ASP.NET Core Razor Pages 应用程序中,以扫描上传图像中的条码和 QR 码,并从服务器生成条码。
如何在 ASP.NET Core 中读取和扫描条码
- 安装 C# 库以读取和扫描条码
- 创建一个新的 ASP.NET Core Razor Pages 项目
- 设计文件上传表单以接受条码图像
- 使用
Read方法扫描上传图像中的条码 - 在页面上显示解码的条码值
IronBarcode: C#条码库
IronBarcode 为 .NET 应用程序提供了一个强大的读写条码的 API。 该库在内部处理图像处理,因此开发人员可以直接将原始字节、文件路径或流传递给 BarcodeReader.Read 方法,而无需单独的图像处理库。 它支持广泛的条码格式,包括 QR Code、Code 128、Code 39、PDF417、EAN 等。
对于 Web 应用程序,IronBarcode 特别有用,因为它完全在内存中处理图像。 上传的文件不需要保存到磁盘,这简化了部署并减少了清理的工作量。 该库还支持生成 BarcodeWriter.CreateBarcode BARCODE,使其成为读写功能的单一依赖项。
在 ASP.NET Core 中构建条码扫描器的步骤
按照以下步骤使用 ASP.NET Core Razor Pages 和 IronBarcode 创建一个基于 Web 的条码扫描器。
前提条件
- Visual Studio 2022 或更高版本(或任何支持 .NET 的 IDE)
- .NET 6.0 或更高版本的 SDK
创建项目
创建一个新的 ASP.NET Core Web App (Razor Pages) 项目。 这可以通过 Visual Studio 的项目向导或命令行完成:
dotnet new webapp -n BarcodeWebApp
dotnet new webapp -n BarcodeWebApp
安装 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>
布局使用 Bootstrap 类,这些类已包含在默认的 ASP.NET Core 模板中。 表单提交至 Upload 页面处理程序,条件语句块将显示上传图片的预览、解码结果或错误信息。
示例输入条码
以下示例条码可用于测试扫描器。 每个图像编码不同的格式和值:
QR Code 编码 "https://ironsoftware.com"
编码128条码编码"IronBarcode-2026"
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
上述代码中的关键步骤:
- 接收上传数据 -
IFormFile通过[BindProperty]进行绑定,并在 POST 处理程序中接收。 - 转换为字节 - 文件被复制到
MemoryStream并转换为字节数组。 这与网页扫描器示例采用的方法相同,只是将 base64 字符串替换为 .NET Core 的IFormFile。 - 读取 BARCODE -
BarcodeReader.Read(imageBytes)处理图像并返回所有检测到的 BARCODE。 - 显示结果 - 所有检测到的条码值被连接并显示在 UI 中。
以下 GIF 演示了条码阅读器的实际操作,上传条码图像并显示解码结果:
在 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
此方法通过逗号分隔并提取实际的 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
生成的条码以文件下载的形式返回。 下图展示了由 OnPostGenerate 处理程序生成的QR码:
服务器端生成 QR 码使用 BarcodeWriter.CreateBarcode
运行应用程序
通过 Visual Studio 或命令行运行项目:
dotnet run
dotnet run
应用程序将在 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支持批量处理,允许开发人员在一个操作中生成或读取多个条形码,提高大规模应用的效率。

