IronQR 操作指南 Blazor QR码扫描器 如何在 Blazor 中构建二维码扫描器 Curtis Chau 已更新:2026年3月2日 下载 IronQR NuGet 下载 免费试用 LLM副本 LLM副本 将页面复制为 Markdown 格式,用于 LLMs 在 ChatGPT 中打开 向 ChatGPT 咨询此页面 在双子座打开 向 Gemini 询问此页面 在 Grok 中打开 向 Grok 询问此页面 打开困惑 向 Perplexity 询问有关此页面的信息 分享 在 Facebook 上分享 分享到 X(Twitter) 在 LinkedIn 上分享 复制链接 电子邮件文章 This article was translated from English: Does it need improvement? Translated View the article in English 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 $vbLabelText $csharpLabel InputFile.OpenReadStream 将上传的字节流直接写入服务器端的临时文件。AnyBitmap.FromFile 解码图像格式,并QrReader.Read 返回一个IEnumerable<QrResult>,其中包含每个发现的二维码对应的一条记录。 FirstOrDefault 能安全处理不含二维码的图像,且不会抛出异常。 输出 选择二维码图片并点击"扫描二维码"后,解码后的值将显示在控件下方的结果段落中。 在 Blazor 组件中渲染的解码 QR 码值 下载项目 点击此处下载完整的 BlazorQrScanner 项目。 结论 IronQR 可无缝集成到 Blazor Server 应用程序中,无需使用 JavaScript。 InputFile 提供浏览器原生的文件选择功能,而 QrReader.Read 则完全在服务器端进行解码处理。 同样的模式也可扩展至扫描单张图片中的多个二维码,方法是遍历完整的结果集合,而非调用 FirstOrDefault。 有关读取二维码及可用扫描模式的更多信息,请参阅《从图像读取二维码》和《使用扫描模式读取二维码》指南。 Curtis Chau 立即与工程团队聊天 技术作家 Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。除了开发之外,Curtis 对物联网 (IoT) 有浓厚的兴趣,探索将硬件和软件集成的新方法。在空闲时间,他喜欢玩游戏和构建 Discord 机器人,将他对技术的热爱与创造力相结合。 准备开始了吗? Nuget 下载 63,625 | 版本: 2026.4 刚刚发布 免费试用 免费 NuGet 下载 总下载量:63,625 查看许可证 还在滚动吗? 想快速获得证据? PM > Install-Package IronQR 运行示例 观看您的 URL 变成 QR 代码。 免费 NuGet 下载 总下载量:63,625 查看许可证