如何建立 Blazor 二維碼掃描器

什麼是 Blazor 伺服器？

Blazor Server是 ASP.NET Core 平台的一部分，是一個 Web 應用程式框架。 它使開發人員能夠使用 C# 而不是 JavaScript 建立互動式 Web 使用者介面。 此伺服器端模型透過 SignalR 連接處理用戶互動來運行，從而提供即時網路功能。 這有助於開發者創建高效且互動性強的網頁應用程式。

IronQR簡介

IronQR是一個 .NET 函式庫，其突出之處在於能夠高精度地讀取、解釋和產生二維碼。 它提供了一系列功能，包括處理不同類型的二維碼內容的功能。 IronQR 的優勢在於其簡單易用，可以輕鬆整合到 .NET 應用程式中，因此對於希望整合和建立二維碼功能的開發人員來說，IronQR 是一個不錯的選擇。

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

啟動 Visual Studio，選擇"建立新專案"。在專案範本選擇畫面中，找到並選擇"Blazor 伺服器應用程式"範本。 點選"下一步"。

如何建立 Blazor 二維碼掃描器：圖 1 - 找到要實現的正確模板

選擇範本後，輸入項目名稱和地點（其他所有選項保持預設值），然後按一下"下一步"按鈕。

如何建立 Blazor 二維碼掃描器：圖 2 - 設定項目詳情

現在選擇所需的 .NET Framework，然後點選建立按鈕。 它將創建一個 Blazor Server 應用程式。

如何建立 Blazor 二維碼掃描器：圖 3 - 選擇 .NET Framework 並建立項目

安裝 IronQR 庫

點選選單列中的"工具"。 從下拉式選單中選擇 NuGet 套件管理器。 從上下文功能表中，選擇"管理解決方案的 NuGet 套件"。 這將開啟 NuGet 套件管理器標籤。

如何建立 Blazor 二維碼掃描器：圖 4 - 存取 NuGet 套件管理器

在 NuGet 套件管理員中，在"瀏覽"標籤中搜尋"IronQR"。 然後在清單中找到"IronQR"軟體包。點擊"安裝"按鈕。

如何建立 Blazor 二維碼掃描器：圖 5 - 透過"瀏覽"標籤安裝 IronQR 軟體包

現在所有裝置都已安裝完畢，我們可以一起查看專案結構，並將所有內容整合到您的專案中。

建構使用者介面

二維碼掃描器的使用者介面主要建構於Index.razor檔案中。該檔案是 Blazor 伺服器專案的一部分，它結合了 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>此元件用於上傳二維碼圖像。 此元素僅接受影像文件，透過過濾掉不相關的文件類型來提升使用者體驗。

圖片顯示：圖片上傳後，會使用以下方式顯示：<img>標籤。 這種視覺回饋對於確保用戶上傳的檔案正確至關重要。

掃描按鈕：帶有@onclick="ScanQRCode"標籤的按鈕會觸發掃描過程。 其可用性取決於是否選擇了文件，從而增強了介面的直覺性。

結果顯示：掃描的二維碼文字將顯示在文字輸入欄位中，方便查看。 使用者可以透過另一個按鈕將此文字複製到剪貼簿。

site.css 中的 CSS 樣式

二維碼掃描器的視覺美感和佈局在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 ：套用於二維碼影像的樣式包括尺寸限制和自動居中邊距，使影像突出但不至於過於醒目。

.result-section ：此功能確保結果部分中的元素居中對齊並適當間距。

處理文件上傳

HandleSelectedFile方法是二維碼掃描過程中的關鍵部分，用於處理使用者上傳的檔案並準備進行掃描。 當使用者透過以下方式選擇檔案時，將觸發此方法：<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}";
}

以下是其功能的詳細說明：

文件選擇和驗證：當使用者上傳文件時，該方法使用InputFileChangeEventArgs e捕獲文件的詳細資訊。 然後將selectedFile變數賦值給該文件，並將布林值fileSelected設為 true，表示輸入資料/文件已準備好進行處理。

建立檔案路徑：此方法準備一個目錄來儲存上傳的映像。 它使用Path.Combine建立指向"UploadedImages"目錄的路徑，並使用Directory.CreateDirectory確保目錄存在。 這一步驟對於有系統地整理上傳的文件至關重要。

產生唯一檔案名稱：為避免與現有檔案衝突，使用 GUID（全域唯一識別碼）附加到原始檔案副檔名來產生唯一檔案名稱。 這樣可以確保每個上傳的檔案都有唯一的識別。

儲存檔案：然後將檔案儲存到伺服器。 此方法建立一個指向新產生的檔案路徑的檔案流，並使用await selectedFile.OpenReadStream().CopyToAsync(fileStream)將上傳檔案的內容複製到此流中。 此步驟完成上傳過程。

準備顯示影像：檔案儲存後，需要將影像顯示給使用者進行確認。 該方法將檔案讀取到位元組數組中，並將其轉換為 base64 字串，以便直接嵌入到文字中。<img>標籤的src屬性。 這種轉換方式使得無需單獨向伺服器請求影像檔案即可顯示影像。

掃描二維碼

ScanQRCode方法是 Blazor Server 應用程式中二維碼掃描功能的核心。 此方法會取得上傳的圖像，並使用 IronQR 提取二維碼資料。

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

首先，此方法會檢查儲存上傳影像路徑的qrImageSrc變數是否為空。 此檢查可確保在繼續操作之前，存在有效的影像可供使用。

一旦確認影像已準備好進行處理，該方法就會繼續執行二維碼讀取的核心功能。 這包括幾個關鍵步驟，首先是將圖像從其儲存位置載入為適合二維碼分析的格式。 AnyBitmap.FromFile(qrImageSrc)方法可以實現這種轉換，該方法為掃描過程準備影像。

下一步是建立QrReader物件。 該物件是 IronQR 庫不可或缺的一部分，是解碼影像中二維碼的主要工具。 QrReader實例準備好後，應用程式將繼續掃描上傳的影像。 reader.Read(imageInput)函數負責執行此操作，它會有條不紊地搜尋影像中的二維碼並提取其資料。

掃描結果儲存在IEnumerable<QrResult>中IEnumerable<QrResult>收藏。 然後仔細檢查該集合，找出第一個二維碼結果。 如果偵測到二維碼，且二維碼包含可讀文本，則擷取該文字並將其儲存在scannedText變數中。 但是，在找不到二維碼或二維碼不包含文字的情況下，應用程式會設定預設訊息，告知使用者未偵測到二維碼值。

成功掃描二維碼後，由於 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 互通功能來呼叫copyTextToClipboard JavaScript 函數。 scannedText作為參數傳遞給此函數，從而有效地將文字複製到使用者的剪貼簿。

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

執行應用程式

專案運行後，用戶將看到以下簡潔明了的介面。 初始螢幕顯著位置展示了二維碼掃描器模組。 此模組包含一個用於上傳二維碼圖像檔案的按鈕（"選擇檔案"），以及另一個用於啟動掃描過程的按鈕（"掃描二維碼"）。 初始狀態下，未選擇任何文件，掃描區域為空白，等待使用者輸入。

如何建立 Blazor 二維碼掃描器：圖 6 - 專案初始執行結果

使用者使用"選擇檔案"按鈕選擇並上傳二維碼影像，此時會顯示所選檔案的名稱（例如，"qrvalue.png"）。 上傳的二維碼會顯示在介面上的指定區域，向使用者確認影像已準備好進行掃描。

如何建立 Blazor 二維碼掃描器：圖 7 - 使用者輸入二維碼後的結果

用戶點擊"掃描二維碼"按鈕後，應用程式將處理影像。 如果掃描成功，二維碼中編碼的文字將顯示在圖像下方。 在這種情況下，掃描結果（ &#39;<https://ironsoftware.com/csharp/qr/> &#39; ) 是一個 URL，指示使用 QR 閱讀器掃描 QR 碼時，使用者將被引導至何處。 結果旁邊會出現一個複製按鈕，方便使用者將掃描的文字複製到剪貼簿以供後續使用。

如何建立 Blazor 二維碼掃描器：圖 8 - 此圖顯示了二維碼中的文字和複製按鈕