如何創建Blazor QR Code掃描器

什麼是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套件

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

建構使用者介面

二維碼掃描器的使用者介面主要建構於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 樣式

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:應用於二維碼圖像的樣式包括尺寸限制和自動居中邊距，使圖像突出但不至於過於醒目。

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

成功掃描二維碼後，由於Blazor的雙向資料綁定功能，文字字串將顯示在文字輸入欄位中。 這是透過將 scannedText 變數綁定到文字輸入元素來實現的。 輸入欄位已設定為停用狀態，變成唯讀。 這種設計選擇著重於使用者查看結果並複製它，而不是編輯內容。

整個掃描過程都包含在 try-catch 區塊中，以防止掃描操作過程中出現任何意外錯誤。 這可能包括與影像檔案格式相關的問題，或讀取過程中出現的意外錯誤。 如果發生異常，則會捕獲該異常，並產生錯誤訊息顯示給使用者。 這種方法有助於追蹤問題，同時保持對使用者的透明度，從而提高應用程式的可靠性。

複製結果

為了啟用複製到剪貼簿功能，在 @@--CODE-382--CODE-381 --CODE-382 檔案中定義了一個名為 @@--CODE-381--CODE-381的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 方法，這是一種與剪貼簿互動的現代方法。 該方法因其簡單易用且符合網路標準而備受青睞。 它旨在複製成功後在控制台中記錄成功訊息，以幫助調試並確保流暢的功能。 如果發生錯誤，錯誤訊息會記錄到控制台，從而提供有關操作過程中遇到的任何問題的見解。

Razor的 CopyToClipboard 方法位於 @code 部分，作為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 - 使用者輸入二維碼的結果

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

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