如何在Blazor中生成QR碼

以下步驟將幫助您在Blazor伺服器應用程式中以最佳方式生成QR碼：

新增Blazor HTML元件

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

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

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

<input @bind="text" />

<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 @bind="text" />

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

在以上程式碼中，有兩個私有字串變數。 text將從輸入字段中獲取使用者輸入。 然後，在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伺服器應用程式首頁上顯示

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