如何建立 Blazor QR 碼掃描器

介紹

本文探討快速響應碼掃描器的整合(QR碼掃描器)在使用IronQR的Blazor應用程式中，這是一個.NET程式庫。 QR 碼是二維條碼，能夠儲存比一般一維條碼更多的數據。

Blazor 是一個由微軟推出的框架，允許開發者製作單頁應用程式(使用 Blazor WebAssembly 應用程式)或者使用 C# 來建立互動式網頁介面，(Blazor Server，本指南將著重於此).

將IronQR與Blazor Server整合以進行QR碼掃描是一種戰略性的組合，能夠發揮兩項技術的優勢。 通過將 IronQR 與 Blazor 應用程式整合，您可以高效處理 QR 碼的生成和掃描。 在庫存管理、票務系統和無接觸信息共享等各種商業環境中，QR 碼閱讀器的此功能需求日益增長。

理解基礎知識

什麼是 Blazor Server？

Blazor 伺服器是 ASP.NET Core 平台的一部分的網頁應用程式框架。 它使開發人員能夠使用C#而不是JavaScript來構建互動式網頁用戶介面。 此伺服器端模型通過處理用戶在 SignalR 連接上的互動來運行，這是一種即時網頁功能。 這有助於開發人員創建有效且互動的網絡應用程式。

IronQR 介紹

IronQR是一個.NET庫，以其讀取、解釋和生成 QR 碼具有高準確性。 它提供了一系列功能，包括處理不同類型的QR碼內容的能力。 IronQR的優勢在於其簡單性及易於整合到.NET應用程式中，使其成為開發人員在尋求融入和創建QR碼功能時的首選。

如何建立 Blazor QR 碼掃描器

1. 在 Visual Studio Code 中創建 Blazor 伺服器應用程式

2. 使用 NuGet 套件管理器安裝 QR Code 類別庫

3. 在 index.razor 中使用 HTML 和 CSS 創建用戶介面。

4. 編寫上傳文件處理邏輯

5. 使用QR庫編寫QR掃描邏輯。

6. 在文本框中顯示結果

設定環境

建立一個新的 Blazor 伺服器應用程式

啟動 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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

@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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @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(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @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
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</div>

標題和標題: The <PageTitle>和<h1>