如何在 Blazor 中构建二维码扫描器
Blazor Server 是一个 .NET Web 框架,它在服务器端运行 C#,并通过 SignalR 连接将 UI 更新推送至浏览器。 IronQR 可直接集成到 Blazor Server 中,支持通过浏览器上传的图片进行服务器端二维码扫描,且无需任何 JavaScript 代码。
在本操作指南中,我们将构建一个 Blazor Server 页面,该页面支持图片上传,并使用 IronQR 解码其中的任何嵌入式二维码。
如何在 Blazor 中扫描二维码
- 安装 IronQR C# 库以扫描网页上的二维码
- 添加一个
InputFile组件,用于接收来自浏览器的图片上传 - 将上传的文件流式传输到服务器上的临时路径
- 加载图片并将其封装在
QrImageInput中 - 调用
Read方法并在 Blazor 组件中显示解码后的值
前提条件
- 已安装 ASP.NET 和 Web 开发工作负载的 Visual Studio 2022
- 针对 .NET 8 或更高版本的 Blazor Server 项目
安装 IronQR
请通过 Visual Studio 中的 NuGet 包管理器控制台安装 IronQR 库。 导航至 Tools > NuGet Package Manager > Package Manager Console 并运行:
Install-Package IronQR
或者,在 NuGet 上搜索 IronQR 并安装最新版本。
Blazor 组件布局
扫描器界面使用 Blazor 内置的 InputFile 组件实现浏览器原生文件选择功能,包含一个用于触发扫描的按钮,以及一个用于显示解码结果的段落。 无需 JavaScript 互操作。
添加一个新的 Razor 组件 Scanner.razor,并使用以下标记:
@page "/scanner"
@using IronQr
@using IronSoftware.Drawing
<h3>QR Code Scanner</h3>
<InputFile OnChange="OnFileSelected" accept="image/*" />
<br /><br />
<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>
<p>Result: @scannedText</p>
示例输入
请使用下方的二维码作为测试图片。 将其保存到设备中,通过应用内的文件选择器上传,然后点击"扫描二维码"。 解码后的值应显示为 https://ironsoftware.com。
示例二维码 — 编码地址:https://ironsoftware.com
使用 IronQR 扫描二维码
当选中文件时,OnFileSelected 会将浏览器的上传内容流式传输到服务器上的临时文件中。 点击扫描按钮时,ScanQRCode 将文件加载到 AnyBitmap 中,将其传递给 QrReader.Read(),并将第一个解码值写入 scannedText,Blazor 会自动在组件中渲染该值。
将以下 @code 代码块添加到 Scanner.razor 中:
:path=/static-assets/qr/content-code-examples/how-to/blazor-qr-code-scanner.cs
using IronQr;
using IronSoftware.Drawing;
private string? qrImageSrc;
private string scannedText = string.Empty;
private async Task OnFileSelected(InputFileChangeEventArgs e)
{
var file = e.File;
var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
await using var fs = File.Create(tempPath);
await stream.CopyToAsync(fs);
qrImageSrc = tempPath;
}
private async Task ScanQRCode()
{
// Load the scanned QR code
var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
var imageInput = new QrImageInput(inputBmp);
var reader = new QrReader();
// Read the scanned QR code
var results = reader.Read(imageInput);
// Check if a result was found
var firstResult = results.FirstOrDefault();
if (firstResult != null)
{
// Save the QR code value as a string
scannedText = firstResult.Value;
}
else
{
scannedText = "No QR code found in the selected image.";
}
}
Imports IronQr
Imports IronSoftware.Drawing
Imports System.IO
Imports Microsoft.AspNetCore.Components.Forms
Imports System.Threading.Tasks
Private qrImageSrc As String = Nothing
Private scannedText As String = String.Empty
Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
Dim file = e.File
Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
Await Using fs = File.Create(tempPath)
Await stream.CopyToAsync(fs)
End Using
End Using
qrImageSrc = tempPath
End Function
Private Async Function ScanQRCode() As Task
' Load the scanned QR code
Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
Dim imageInput = New QrImageInput(inputBmp)
Dim reader = New QrReader()
' Read the scanned QR code
Dim results = reader.Read(imageInput)
' Check if a result was found
Dim firstResult = results.FirstOrDefault()
If firstResult IsNot Nothing Then
' Save the QR code value as a string
scannedText = firstResult.Value
Else
scannedText = "No QR code found in the selected image."
End If
End Function
InputFile.OpenReadStream 将上传的字节流直接写入服务器端的临时文件。AnyBitmap.FromFile 解码图像格式,而 QrReader.Read 返回一个 IEnumerable<QrResult> 对象,其中包含每个已发现的QR码对应的一条记录。 FirstOrDefault 能安全处理不含QR码的图像,且不会抛出异常。
输出
选择二维码图片并点击"扫描二维码"后,解码后的值将显示在控件下方的结果段落中。
在 Blazor 组件中渲染的解码 QR 码值
下载项目
结论
IronQR 可无缝集成到 Blazor Server 应用程序中,无需使用 JavaScript。 InputFile 提供浏览器原生文件选择功能,而 QrReader.Read 则完全在服务器端进行解码处理。 同样的模式可扩展至扫描单张图片中的多个QR码,方法是遍历完整的结果集合,而非调用 FirstOrDefault。
有关读取二维码及可用扫描模式的更多信息,请参阅《从图像读取二维码》和《使用扫描模式读取二维码》指南。
常见问题解答
在Blazor服务器应用程序中,IronQR的主要用途是什么?
IronQR主要用于Blazor服务器应用程序,使得即使没有JavaScript,也能从浏览器上传的图像中进行服务端QR代码扫描。
如何在Blazor项目中安装IronQR库?
要在Blazor项目中安装IronQR库,可以在Visual Studio中的NuGet包管理器控制台中运行安装命令,或者在NuGet上搜索'IronQR'并安装最新版本。
在Blazor中,用于处理QR代码扫描图像上传的组件是什么?
`InputFile`组件用于Blazor中处理图像上传,允许用户从浏览器中选择图像进行QR代码扫描。
IronQR如何在Blazor应用程序中解码QR代码?
在Blazor应用程序中,IronQR通过将选择的图像加载到`AnyBitmap`中,然后使用`QrReader.Read()`来提取并显示QR代码的数据。
IronQR可以处理带有多个QR代码的图像吗?
是的,IronQR可以处理带有多个QR代码的图像,通过遍历`QrReader.Read()`返回的`IEnumerable
在Blazor中实现QR代码扫描需要JavaScript吗?
不,在Blazor中实现QR代码扫描不需要JavaScript,因为整个过程在服务端处理。
`AnyBitmap`在IronQR扫描过程中扮演什么角色?
`AnyBitmap`用于解码上传文件的图像格式,为使用IronQR进行QR代码读取做好准备。
Blazor如何显示QR代码扫描的结果?
Blazor通过在组件的UI中的段落元素中渲染解码值来显示QR代码扫描的结果。
如果在Blazor扫描器中上传了一张没有QR代码的图像,会发生什么?
如果上传了没有QR代码的图像,调用`QrReader.Read()`返回的`IEnumerable
可以下载完整的Blazor QR扫描器项目吗?
是的,您可以从指南网页上的提供链接下载完整的Blazor QR扫描器项目。

