如何在 Blazor 中產生二維碼

以下步驟將有助於在 Blazor Server 應用程式中以最佳方式產生二維碼：

新增 Blazor HTML 元件

首先，我們將在"Index.razor"頁面中新增一些HTML程式碼。 程式碼包含一些標題、一個輸入欄位和一些按鈕。

使用以下程式碼將元件新增至 Blazor 條碼應用程式：

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<!-- Input field for QR code text -->
<input @bind="text" />

<!-- Button to trigger QR code generation -->
<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<!-- Input field for QR code text -->
<input @bind="text" />

<!-- Button to trigger QR code generation -->
<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

輸出內容如下：

如何在 Blazor 中產生二維碼：圖 6

文字欄位用於取得使用者輸入，產生按鈕將呼叫QRCodeGenerater方法來建立二維碼。 產生的二維碼將顯示在"已產生的二維碼："標題下。 現在，讓我們建立QRCodeGenerater方法。

建立QRCodeGenerater方法

是時候在 Visual Studio 中使用功能強大的 IronBarcode 函式庫來產生二維碼了。 @code部分已新增至"Index.razor"頁面。 我們先來看下面的完整程式碼：

@code {
    // Variable to hold the generated QR code HTML
    private string qrCode = "";

    // Variable to hold user input text
    private string text = "";

    // Method to generate QR code from user input
    private void QRCodeGenerater()
    {
        // Create a QR code from the input text
        GeneratedBarcode myQRCode = QRCodeWriter.CreateQrCode(text);

        // Convert the generated QR code to HTML tag
        qrCode = Convert.ToString(myQRCode.ToHtmlTag());
    }
}

上面的程式碼中有兩個私有字串變數。 qrCode將顯示產生的二維碼， text將顯示使用者從輸入欄位輸入的內容。 然後，在QRCodeGenerater方法中，使用QRCodeWriter類別的CreateQrCode方法建立myQRCode 。 CreateQrCode方法提供了多個參數來增強程式碼輸出。 您可以自訂二維碼的大小，設定糾錯碼字以保持糾錯級別，並變更QrVersion 。 以下程式碼還可以幫助您處理其他參數：

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

最後，產生的 Blazor 條碼被轉換為 HTML 標籤，然後再轉換為qrCode字串。

從這個程式碼範例頁面可以了解更多關於 IronBarcode 功能的資訊。

在 Blazor 伺服器應用程式主頁上顯示

在"Index.razor"頁面的HTML元件中，將以下程式碼新增至H4標題之後，以顯示qrCode ：

@((MarkupString)qrCode)

另存為 PNG 文件

您也可以使用SaveAsPng方法將其儲存為 PNG 檔案：

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");

如何在 Blazor 中產生二維碼：圖 7