已更新 2026年6月28日
using C# 和網路攝影機建立條碼掃描器
using IronBarcode，用 C# 和網路攝影機建立一個條碼掃描器。即時擷取視訊幀，解碼條碼和二維碼。包含完整原始碼。
閱讀更多
使用IRONBARCODE
如何建立Blazor QR Code掃描器
Curtis Chau
Updated: 2026年4月21日
這篇文章探討了在使用IronQR的Blazor應用程式中整合快速回應程式碼掃描器（QR程式碼掃描器），這是一個.NET程式庫。 QR程式碼是一種二維條碼，比一般的一維條碼儲存更多資料。
Blazor是微軟的框架，允許開發者製作單頁應用程式（使用Blazor WebAssembly應用程式）或使用C#來建立互動網頁介面（Blazor Server，我們將在本指南中專注於此）。
將IronQR與Blazor Server結合以進行QR程式碼掃描是一個戰略性的組合，利用了兩種技術的優勢。 通過將IronQR整合到Blazor應用程式中，您可以有效地處理QR程式碼的生成和掃描。 QR程式碼讀取器的這種功能在各種商業環境中越來越受需求，如庫存管理、票務系統和非接觸式資訊共享。
理解基本概念
什麼是Blazor Server？
Blazor Server是ASP.NET Core平台的一部分的網頁應用框架。 它使開發人員可以使用C#而不是JavaScript來構建互動網頁UI。 這種伺服器端模型通過SignalR連接處理使用者交互，提供即時網頁功能。 這有助於開發者建立有效且具互動性的網頁應用程式。
IronQR介紹
IronQR是一個.NET程式庫，以其能夠高準確率地讀取、解釋和生成QR程式碼而脫穎而出。 它提供了一系列功能，包括處理不同型別的QR程式碼內容的能力。 IronQR的優勢在於其簡易性和易於整合到.NET應用程式中，成為開發者希望整合和建立QR程式碼功能的首選。
如何建立Blazor QR程式碼掃描器
- 在Visual Studio Code中建立Blazor Server應用程式
- 使用NuGet套件管理器安裝QR程式碼類別庫
- 在index.razor中使用HTML和CSS建立使用者介面
- 編寫上傳檔案處理邏輯
- 使用QR庫編寫QR掃描邏輯
- 在文字框中顯示結果
設定環境
建立新的Blazor Server應用程式
啟動Visual Studio並選擇"建立一個新專案"。在項目模板選擇畫面中，找到並選擇"Blazor Server App"模板。 點擊"下一步"。
選擇模板後，輸入專案名稱和位置（其他保持為預設值）並單擊"下一步"按鈕。
現在選擇所需的.NET Framework並點擊"建立"按鈕。 它將建立一個Blazor Server應用。
安裝IronQR程式庫
從選單欄中點擊工具。 從下拉選單中選擇NuGet套件管理器。 從上下文選單中選擇"管理解決方案的NuGet套件"。 這將打開NuGet套件管理器選項卡。
在NuGet套件管理器中，在"瀏覽"標籤中搜尋"IronQR"。 然後在列表中找到"IronQR"套件。點擊"安裝"按鈕。
現在您已經安裝好一切，我們可以瀏覽專案結構並將所有內容實施到您的專案中。
實施QR程式碼掃描
構建使用者介面
QR程式碼掃描器的使用者介面主要在Index.razor文件中構建。這個文件是Blazor Server專案的一部分，使用HTML和Razor語法的組合來建立動態和互動的網頁。 結構包括：
@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
<h1>QR Code Scanner</h1>
<InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
@if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
{
<img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
}
<button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
@if (!string.IsNullOrEmpty(scannedText))
{
<div class="result-section">
<input type="text" value="@scannedText" readonly class="result-input" />
<button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
</div>
}
</div>Text
標題和標題： <PageTitle> 與 <h1> 標籤分別定義頁面的標題和主要標題，為使用者設置上下文。
圖片上傳控制： 使用<InputFile>元件上傳QR程式碼圖片。 這個元素專為只接受圖像檔案而設計，通過篩選掉無關文件型別來增強使用者體驗。
圖像顯示： 一旦上傳圖像，將使用<img>標籤顯示。 這種視覺反饋對使用者而言至關重要，以保證正確的文件已被上傳。
掃描按鈕： 標記為@onclick="ScanQRCode"的按鈕會觸發掃描過程。 其可用性取決於文件是否被選擇，增強了介面的直觀性。
結果顯示： 已掃描的QR程式碼文字將顯示在輸入文字框中以便於查看。 另一個按鈕允許使用者將此文字複製到剪貼簿。
在site.css中的CSS樣式設計
QR程式碼掃描器的視覺美感和佈局定義在site.css文件中。
.content {
padding: 20px;
margin: 10px auto; /* Centers the content */
max-width: 500px; /* Sets a max width for the content */
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.file-input, .result-input {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
width: 100%;
}
.button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
transition: background-color 0.3s, box-shadow 0.3s;
width: auto; /* Adjusts button width */
display: inline-block; /* Allows the width to adjust to content */
}
.button:hover {
background-color: #45a049;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.qr-image {
max-width: 300px;
max-height: 300px;
display: block;
margin: 10px auto;
border-radius: 10px;
}
.result-section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.result-input {
width: 100%;
box-sizing: border-box;
}
.copy-button {
margin-top: 10px;
white-space: nowrap;
}Text
**.content：**此類別為主內容區域設計樣式，給它一個定義寬度、居中對齊和輕微陰影來增添深度。
**.file-input, .result-input：**這些類設計檔案輸入和結果顯示元素，確保它們在視覺上保持一致並完全佔據其容器的寬度。
**.button：**按鈕有了獨特的綠色背景、圓角和懸停效果，便於使用者交互。
**.qr-image：**應用於QR程式碼圖片的樣式包括大小限制和自動邊距居中，讓圖片顯眼但不過於突兀。
**.result-section：**此類別確保結果部分內的元素居中對齊並適當間隔。
處理文件上傳
HandleSelectedFile方法是QR程式碼掃描過程中的關鍵部分，處理使用者的文件上傳並準備掃描。 當使用者通過<InputFile> 元件選擇文件時，該方法將被觸發。 以下程式碼顯示了這一點：
private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
selectedFile = e.File;
fileSelected = true;
var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists
// Use a GUID as the unique file name
var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
var fullPath = Path.Combine(imagesDirectory, uniqueFileName);
await using (var fileStream = new FileStream(fullPath, FileMode.Create))
{
await selectedFile.OpenReadStream().CopyToAsync(fileStream);
}
// Store the full path in qrImageSrc for scanning
qrImageSrc = fullPath;
// Optionally, create a base64 string for displaying the image (if needed)
byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
var base64String = Convert.ToBase64String(imageBytes);
qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
selectedFile = e.File
fileSelected = True
Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists
' Use a GUID as the unique file name
Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
' await using(var fileStream = New FileStream(fullPath, FileMode.Create))
' {
' await selectedFile.OpenReadStream().CopyToAsync(fileStream);
' }
' Store the full path in qrImageSrc for scanning
qrImageSrc = fullPath
' Optionally, create a base64 string for displaying the image (if needed)
Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
Dim base64String = Convert.ToBase64String(imageBytes)
qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function以下是其功能的詳細分解：
**文件選擇和驗證：**當使用者上傳文件時，該方法使用InputFileChangeEventArgs e來捕獲文件的詳細資訊。 然後將selectedFile 變數分配給此文件，並設置布林值fileSelected 為true，表明輸入資料/文件已準備好處理。
**建立文件路徑：**該方法準備一個目錄來儲存上傳的圖片。 它使用Path.Combine 建立到'UploadedImages'目錄的路徑，並使用Directory.CreateDirectory 確保該目錄存在。 這一步對於系統地組織上報文件必不可少。
**生成獨特的文件名：**為了避免與已有文件衝突，使用GUID（全球唯一標識符）附加原始文件的擴展名生成唯一的文件名。 這確保每個上傳的文件都具有獨特標識。
**保存文件：**然後文件被保存到伺服器。 該方法建立一個指向新生成路徑的文件流，並通過使用await selectedFile.OpenReadStream().CopyToAsync(fileStream) 將上傳文件的內容複製到此流中。 這一步完成了上傳過程。
**為顯示準備圖片：**文件被保存後，需要將圖像顯示給使用者以供確認。 方法將檔案讀入字節陣列併轉換為base64字串，適合直接嵌入<img> 標籤的src 屬性中。 這一轉換使得圖像能夠在不需要對伺服器進行單獨的圖像文件請求的情況下顯示。
掃描QR程式碼
ScanQRCode 方法是Blazor Server應用中QR程式碼掃描功能的核心。 這個方法採用上傳的圖像並使用IronQR提取QR程式碼資料。
private async Task ScanQRCode()
{
// Check if there is a valid image to work with
if (string.IsNullOrEmpty(qrImageSrc)) return;
try
{
var inputBmp = AnyBitmap.FromFile(qrImageSrc);
QrImageInput imageInput = new QrImageInput(inputBmp);
QrReader reader = new QrReader();
IEnumerable<QrResult> results = reader.Read(imageInput);
// Check if there are any results and if the first result contains text
var firstResult = results.FirstOrDefault();
if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
{
scannedText = firstResult.Value.ToString();
}
else
{
scannedText = "QR value not found!";
}
}
catch (Exception ex)
{
scannedText = "Error scanning QR code: " + ex.Message;
}
}Private Async Function ScanQRCode() As Task
' Check if there is a valid image to work with
If String.IsNullOrEmpty(qrImageSrc) Then
Return
End If
Try
Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
Dim imageInput As New QrImageInput(inputBmp)
Dim reader As New QrReader()
Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)
' Check if there are any results and if the first result contains text
Dim firstResult = results.FirstOrDefault()
If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
scannedText = firstResult.Value.ToString()
Else
scannedText = "QR value not found!"
End If
Catch ex As Exception
scannedText = "Error scanning QR code: " & ex.Message
End Try
End Function最初，該方法檢查儲存上傳圖像路徑的qrImageSrc 變數是否不為空。 這一步檢查確保在繼續之前有一個有效的圖片可以使用。
一旦確認有圖片準備處理，該方法進行QR程式碼讀取的核心功能。 這涉及一些關鍵步驟，從將圖像從其儲存位置載入轉換為適合QR程式碼分析的格式開始。 通過AnyBitmap.FromFile(qrImageSrc) 方法實現此轉換，為掃描過程準備圖像。
下一步是建立QrReader 物件。 這個物件是IronQR程式庫的核心，作為從圖像解碼QR程式碼的主要工具。 當QrReader 實例準備好後，應用程式繼續掃描上傳的圖像。 由reader.Read(imageInput) 函式負責執行此操作，有條不紊地搜尋圖像中的QR程式碼並提取它們的資料。
掃描結果將儲存在IEnumerable<QrResult> 集合中。 然後可以查看該集合以找到第一個QR程式碼結果。 如果檢測到QR程式碼，並且包含可讀文字，則此文字將被捕獲並儲存在scannedText 變數中。 然而，在沒有找到QR程式碼或不含文字的情況下，應用設置一個預設消息以告知使用者未檢測到任何QR值。
QR程式碼成功掃描後，文字字串會顯示在輸入文字框中，這要歸功於Blazor的雙向資料綁定功能。 這是通過將scannedText 變數綁定到文字輸入元素來實現的。 輸入欄被設置為禁用，使其為只讀。 這一設計選擇強調使用者的互動，重點在於檢視結果及複製，而不是編輯內容。
整個掃描過程封閉在try-catch塊中，保障掃描操作期間不會發生任何未預見的錯誤。 這可能包含與圖像文件格式相關的問題，或在讀取過程中的意外錯誤。 如果出現例外，則會被捕獲，並編制並顯示錯誤消息給使用者。 這種方法有助於跟蹤問題，並在使用者面前保持透明性，增強應用程式的可靠性。
複製結果
為啟用複製到剪貼簿功能，在copyTextToClipboard的JavaScript函式。此腳本簡單而有效地與剪貼簿交互：
<script>
function copyTextToClipboard(text) {
navigator.clipboard.writeText(text).then(function () {
console.log('Copying to clipboard was successful!');
}, function (err) {
console.error('Could not copy text: ', err);
});
}
</script>HTML
此功能接受一個文字參數，即要複製的文字。 它使用navigator.clipboard.writeText 方法，這是一種與剪貼簿交互的現代方法。 該方法因其簡單性和符合網頁標準而受歡迎。 它設計的目的是在成功複製後在控制台中記錄成功資訊，以幫助除錯和確保功能運行順利。 如果出現錯誤，則將錯誤消息記錄到控制台，提供在操作期間遇到任何問題的見解。
index.razor中CopyToClipboard方法作為Blazor應用和JavaScript函式之間的橋樑。 在使用者介面中，一個按鈕觸發該方法的點擊。 啟動後，它利用Blazor的JavaScript InterOp功能調用copyTextToClipboard JavaScript函式。 scannedText被作為參數傳遞給此函式，有效地將文字複製到使用者的剪貼簿上。
private async Task CopyToClipboard()
{
await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}Private Async Function CopyToClipboard() As Task
Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function執行應用程式
啟動專案後，使用者將看到以下乾淨簡單的介面。 初始畫面顯眼地展示QR程式碼掃描模組。 該模塊包括一個上傳QR程式碼圖像文件的按鈕（'選擇文件'）和另一個啟動掃描過程的按鈕（'掃描QR程式碼'）。 最初，沒有文件被選中，掃描區域是空白，等待使用者輸入。
使用者使用'選擇文件'按鈕選擇並上傳QR程式碼圖像，現在顯示所選文件的名稱（例如，'qrvalue.png'）。 上傳的QR程式碼在介面上指定的區域中可見，確認使用者圖像已準備好掃描。
使用者點擊'掃描QR程式碼'按鈕後，應用程式將處理該圖像。 如果掃描成功，QR程式碼內編碼的文字將顯示在圖片下方。 在此情況下，已掃描的結果（'<https://ironsoftware.com/csharp/qr/>'）是一個URL，指示當使用QR讀取器掃描時QR程式碼會將使用者帶到的地方。 結果旁邊出現一個複製按鈕，讓使用者可以輕鬆地將掃描的文字複製到剪貼簿以便進一步使用。
結論
總之，將IronQR整合到Blazor Server應用程式的過程是順暢且有效的，最終形成一個QR程式碼掃描解決方案。 從設置此專案開始到其掃描功能的實施，IronQR的強大處理和Blazor的動態UI渲染結合，讓該過程響應迅速且簡單易用。 從建立環境到部署的過程，強調了這種整合在現實應用中的實用性和效益。 雖然IronQR擅長QR程式碼，但對於需要掃描條碼功能的專案，IronBarcode是理想的選擇，提供類似的易用和整合度。
IronQR提供免費試用，可供開發人員在購買前探索其功能。 若要擴展使用和存取其在生產中的所有專業功能，IronQR授權價格從$999起。
技術作家
Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。
...
閱讀更多相關文章
IronBarcode 是 IRONSUITE 的一部分
10 款適用於辦公室文件的 .NET API 產品
當您需要快速讀取、寫入和樣式化條形碼。
