如何創建Blazor QR Code掃描器

什麼是 Blazor Server？

Blazor Server 是一個屬於 ASP.NET Core 平台的網頁應用程式框架。 它使開發人員能通過使用 C# 而不是 JavaScript 來構建互動式網頁 UI。 這種伺服器端模型通過處理用戶交互來運作，這是通過 SignalR 連接提供實時網頁功能。 這幫助開發人員創建高效及互動性強的網頁應用程式。

IronQR 的介紹

IronQR is a .NET library that stands out for its ability to read, interpret, and 生成 QR 碼。 它提供了一系列功能，包括處理不同類型的 QR 碼內容的能力。 IronQR 的強大在於其簡單易用和易於整合到 .NET 應用程式中，使其成為開發人員希望融入及創建 QR 碼功能時的首選。

創建一個新的 Blazor Server 應用程式

啟動 Visual Studio 並選擇“創建一個新項目”。在項目模板選擇屏幕中，找到並選擇“Blazor Server App”模板。 單擊 Next。

選擇模板後，輸入項目名稱和位置（將其他所有內容保留為默認值），然後單擊 Next 按鈕。

現在選擇所需的 .NET Framework 並點選創建按鈕。 這將創建一個 Blazor Server 應用程式。

安裝 IronQR 庫

從菜單欄點選工具。 從下拉菜單中選擇 NuGet 套件管理器。 從上下文菜單中選擇“管理項目 NuGet 套件”。 這將打開 NuGet 套件管理器選項卡。

在 NuGet 套件管理器中，於“瀏覽”選項卡中搜尋“IronQR”。 然後在列表中找出“IronQR”套件。點擊“安裝”按鈕。

現在您已安裝好所有內容，我們可以瀏覽項目結構並將所有內容實施到您的項目中。

構建用戶界面

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>

標題和標題：<PageTitle> 和 <h1> 標籤分別定義了頁面的標題和主要標題，為用戶設定了上下文。

圖像上傳控件：使用 <InputFile> 組件來上傳 QR 碼圖像。 這個元素被設計為只接受圖像文件，提高了用戶體驗，通過過濾掉無關的文件類型。

圖像顯示：一旦上傳圖像，它會使用 <img> 標籤顯示。 這種視覺反饋對於用戶保證上傳了正確的文件至關重要。

掃描按鈕：一個標記有 @onclick="ScanQRCode" 的按鈕觸發掃描過程。 它的可用性取決於是否選擇了文件，提高了界面的直觀性。

結果顯示：掃描 QR 碼的文本顯示在文本輸入框中，方便查看。 一個單獨的按鈕允許用戶將此文本複製到剪貼板。

CSS 在 site.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;
}

.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 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) 將上傳文件的內容複製到此流中。 這一步完成上傳過程。

準備圖像以供顯示：文件保存後，需要將圖像顯示回給用戶以作確認。 該方法將文件讀入位元組數組並將其轉換為基本64字符串，適合直接嵌入到 <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 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 塊中，以防範掃描操作中的任何不可預見錯誤。 這可能包括與圖像文件格式相關的問題或掃描過程中的意外錯誤。 如果發生異常，則該異常會被捕獲，並製定錯誤信息顯示給用戶。 這種方法有助於跟踪問題，同時保持用戶的透明度，增強應用的可靠性。

複製結果

為了啟用復製到剪貼板功能，在 _Host.cshtml 文件中定義了一個名為 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>

<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>

該函數接受一個文本參數，這是要被復製的文本。 它使用 navigator.clipboard.writeText 方法，這是一種現代的交互剪貼板的方法。 此方法因其簡單且符合網頁標準而受青睐。 它被設計為在成功復制後在控制台上記錄一個成功提示，這有助於除錯並保證功能的順利運行。 在出現錯誤時，錯誤消息將記錄到控制台，提供關於操作過程中遇到的問題的見解。

index.razor 的 @code 部分中的 CopyToClipboard 方法作為 Blazor 應用程序和 JavaScript 函數之間的橋梁。 用戶界面中的一個按鈕點擊觸發該方法。 激活時，它使用 Blazor 的 JavaScript InterOp 能力調用 copyTextToClipboard JavaScript 函數。 scannedText 被作為參數傳遞給此函數，從而有效地將文本復製到用戶的剪貼板中。

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", 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 碼進行掃描時用戶將被定向的位置。 結果旁邊出現一個複製按鈕，允許用戶輕鬆將掃描的文本複製到剪貼板以供進一步使用。