IronQR 操作指南 Blazor QR碼掃描器 如何在 Blazor 中建立 QR 碼掃描器 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 Framework 網頁框架,可在伺服器端執行 C#,並透過 SignalR 連線將使用者介面更新推送至瀏覽器。 IronQR 可直接整合至 Blazor Server,無需任何 JavaScript 即可對瀏覽器上傳的圖片進行伺服器端 QR 碼掃描。 在這份操作指南中,我們將建立一個 Blazor Server 頁面,該頁面可接受圖片上傳,並使用 IronQR 解碼任何嵌入的 QR 碼。 如何在 Blazor 中掃描 QR 碼 安裝 IronQR C# 程式庫,即可在網頁上掃描 QR 碼 新增 `InputFile` 元件以接收來自瀏覽器的圖片上傳 將上傳的檔案串流至伺服器上的臨時路徑 載入圖片並將其封裝在 `QrImageInput` 中 呼叫 `Read` 並在 Blazor 元件中顯示解碼後的值 先決條件 已安裝 ASP.NET 和網頁開發工作負載的 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> 範例輸入 請使用下方的 QR 碼作為測試圖片。 將其儲存至您的裝置,透過應用程式中的檔案選擇器上傳,然後點擊"掃描 QR 碼"。 解碼後的值應顯示為 https://ironsoftware.com。 QR 碼範例 — 編碼網址:`https://ironsoftware.com` 使用 IronQR 掃描 QR 碼 當選取檔案時,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>,其中每個 QR 碼對應一個條目。 FirstOrDefault 能安全處理不含 QR 碼的圖片,且不會拋出例外。 輸出 選取 QR 碼圖片並點擊"掃描 QR 碼"後,解碼後的值會顯示在控制項下方的結果段落中。 在 Blazor 元件中渲染的解碼 QR 碼值 下載專案 點擊此處下載完整的 BlazorQrScanner 專案。 結論 IronQR 可無需 JavaScript 即可整合至 Blazor Server 應用程式中。 InputFile 提供瀏覽器原生檔案選取功能,而 QrReader.Read 則完全在伺服器端進行解碼。 相同的模式可擴展至掃描單張圖片中的多個 QR 碼,方法是遍歷完整的結果集合,而非呼叫 FirstOrDefault。 有關讀取 QR 碼及可用掃描模式的更多資訊,請參閱《從圖片讀取 QR 碼》和《使用掃描模式讀取 QR 碼》指南。 Curtis Chau 立即與工程團隊聊天 技術作家 Curtis Chau 擁有卡爾頓大學計算機科學學士學位,專注於前端開發,擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面,喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。除了開發之外,Curtis 對物聯網 (IoT) 有著濃厚的興趣,探索將硬體和軟體結合的創新方式。在閒暇時間,他喜愛遊戲並構建 Discord 機器人,結合科技與創意的樂趣。 準備好開始了嗎? Nuget 下載 63,625 | 版本: 2026.4 剛剛發布 開始免費試用 免費 NuGet 下載 總下載量:63,625 查看許可證 還在捲動嗎? 想要快速證明? PM > Install-Package IronQR 執行範例 觀看您的 URL 變成 QR code。 免費 NuGet 下載 總下載量:63,625 查看許可證