如何在Blazor中生成QR碼

以下步驟將幫助生成最佳方式的 QR 碼 在 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>

輸出如下：

文本字段用於從用戶獲取輸入，並且生成按鈕將調用QRCodeGenerater方法來創建 QR 碼。 生成的 QR 碼將顯示在“生成的 QR 碼:”標題下。 現在，我們來創建QRCodeGenerater方法。

創建QRCodeGenerater方法

是時候在 Visual Studio 中使用強大的 IronBarcode 庫來生成 QR 碼了。 @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 將顯示生成的 QR 碼，而text將從輸入字段中獲取用戶輸入。 然後，在QRCodeGenerater方法中，使用QRCodeWriter類的CreateQrCode方法創建了myQRCode。 CreateQrCode方法提供了幾個參數來增強代碼輸出。 您可以自動調整 QR 碼的大小，設置糾錯代碼字以維護糾錯級別，並更改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
)

' Creating a QR code with custom parameters
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'QRCodeWriter.CreateQrCode("https://ironsoftware.com/csharp/barcode/", 500, QRCodeWriter.QrErrorCorrectionLevel.High, 0)

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

從這個代碼示例頁面中獲取更多 IronBarcode 功能的詳細信息。

在 Blazor Server 應用程序首頁顯示

在"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");

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