如何建立Blazor QR Code掃描器

什麼是Blazor Server？

Blazor Server是ASP.NET Core平台的一部分的網頁應用框架。 它使開發人員可以使用C#而不是JavaScript來構建互動網頁UI。 這種伺服器端模型通過SignalR連接處理使用者交互，提供即時網頁功能。 這有助於開發者建立有效且具互動性的網頁應用程式。

IronQR介紹

IronQR是一個.NET程式庫，以其能夠高準確率地讀取、解釋和生成QR程式碼而脫穎而出。 它提供了一系列功能，包括處理不同型別的QR程式碼內容的能力。 IronQR的優勢在於其簡易性和易於整合到.NET應用程式中，成為開發者希望整合和建立QR程式碼功能的首選。

建立新的Blazor Server應用程式

啟動Visual Studio並選擇"建立一個新專案"。在項目模板選擇畫面中，找到並選擇"Blazor Server App"模板。 點擊"下一步"。

選擇模板後，輸入專案名稱和位置（其他保持為預設值）並單擊"下一步"按鈕。

現在選擇所需的.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程式碼文字將顯示在輸入文字框中以便於查看。 另一個按鈕允許使用者將此文字複製到剪貼簿。

在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;
}

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

為顯示準備圖片：文件被保存後，需要將圖像顯示給使用者以供確認。 方法將檔案讀入字節陣列併轉換為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 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>

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

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