ASP.NET Core 条码扫描器:条码扫描与二维码生成
简介
ASP.NET Core 是一个用于构建现代 Web 应用程序的跨平台框架。 其 Razor Pages 模型提供了一种以页面为基础的 HTTP 请求处理方式,非常适合服务器端条码处理。 使用 IronBarcode,上传的图像可以作为 IFormFile 对象接收,转换为字节数组,并直接传递给条码阅读器,无需将临时文件写入磁盘。
本文演示了如何将 IronBarcode 集成到 ASP.NET Core Razor Pages 应用程序中,实现对上传图像进行条码扫描和二维码读取,并从服务器端生成条形码。
如何在 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 实现条形码生成,是读写一体的单一依赖项。
在 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"
Code 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并转换为字节数组。 这与 web 扫描器示例 中使用的方法相同,但经过调整以适应 ASP.NET Core 的IFormFile而不是 base64 字符串。 - 读取条码 -
BarcodeReader.Read(imageBytes)处理图像并返回检测到的所有条码。 - 显示结果 - 所有检测到的条码值被连接并显示在 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 和数据 URI 格式(例如,data:image/png;base64,...)通过逗号拆分并获取实际的 base64 负载。 有关使用此模式的完整 Blazor 实现,请参见 Blazor 集成指南。
在服务器上生成条码
IronBarcode 也可以在服务器端生成条码。通过 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 的教程从 读取条码教程。
要快速入门,请下载完整的BarcodeWebApp项目,然后使用 dotnet run 运行。
IronBarcode 必须获得开发和商业使用的许可。 许可详情可在 这里 获取。
常见问题解答
如何在ASP.NET Core中使用Razor Pages实现条码扫描仪?
您可以在您的ASP.NET Core Razor Pages项目中使用IronBarcode实现条码扫描仪。该库允许您读取各种条码格式,如QR码、Code 128和Code 39,通过上传图像并用BarcodeReader.Read处理。
IronBarcode可以读取哪些类型的条码?
IronBarcode支持读取多种条码格式,包括QR码、Code 128和Code 39,使其适用于各种应用程序。
如何在ASP.NET Core项目中上传图像以进行条码扫描?
在ASP.NET Core项目中,您可以使用IFormFile上传图像。IronBarcode处理这些图像以读取其中包含的条码。
IronBarcode能否在ASP.NET Core中服务器端生成条码?
是的,IronBarcode可以使用BarcodeWriter.CreateBarcode方法在ASP.NET Core中服务器端生成条码,使您能够动态创建和显示条码。
BarcodeReader.Read方法用于什么?
IronBarcode中的BarcodeReader.Read方法用于从图像中解码条码,是在ASP.NET Core中实现条码扫描仪的重要部分。
是否可以在ASP.NET Core中使用同一个库扫描QR码和条码?
是的,IronBarcode允许您在同一ASP.NET Core应用程序中扫描QR码和其他多种条码格式,提供统一的解决方案。
使用IronBarcode进行C#条码扫描有什么好处?
IronBarcode提供了简单的集成、支持多种条码格式以及强大的服务器端条码生成能力,使其成为C#应用程序中进行条码扫描的有效选择。

