Jak generować kod QR w Blazor

Poniższe kroki pomogą wygenerować kody QR w najlepszy możliwy sposób w aplikacji serwera Blazor:

Dodanie komponentów HTML Blazor

Najpierw zamierzamy dodać trochę kodu HTML na stronie "Index.razor". Kod składa się z kilku nagłówków, pola wejściowego i przycisków.

Użyj poniższego kodu, aby dodać komponenty do aplikacji Blazor kodu kreskowego:

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

Oto wynik:

Pole tekstowe służy do pobierania danych wejściowych od użytkownika, a przycisk generowania wywoła metodę QRCodeGenerater do stworzenia kodu QR. Utworzony kod QR będzie wyświetlany pod nagłówkiem "Wygenerowany kod QR:". Teraz utwórzmy metodę QRCodeGenerater.

Utwórz metodę QRCodeGenerater

To czas, aby użyć potężnej biblioteki IronBarcode w Visual Studio do generowania kodów QR. Sekcja @code została dodana do strony "Index.razor". Najpierw zobaczmy kompletny kod poniżej:

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

W powyższym kodzie znajdują się dwie prywatne zmienne string. qrCode wyświetli wygenerowany kod QR, a text pobierze dane wejściowe od użytkownika z pola wprowadzania. Następnie, w metodzie QRCodeGenerater, myQRCode jest tworzony za pomocą metody CreateQrCode klasy QRCodeWriter. Metoda CreateQrCode dostarcza kilka parametrów, aby ulepszyć wynik kodu. Możesz dostosować rozmiar kodu QR, ustawić kody korekcyjne, aby utrzymać poziom korekcji błędów, i zmienić QrVersion. Kod poniżej pomaga również pracować z innymi parametrami:

// 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)

Na koniec, wygenerowany kod paskowy Blazor jest konwertowany do tagu HTML, a następnie do łańcucha qrCode.

Zdobądź więcej szczegółów na temat funkcji IronBarcode z tej strony przykładów kodu.

Wyświetlenie na stronie głównej aplikacji serwera Blazor

Dodaj poniższy kod w komponentach HTML na stronie "Index.razor", po nagłówku H4, aby wyświetlić qrCode:

@((MarkupString)qrCode)

Zapisz jako plik PNG

Możesz również zapisać go do pliku PNG, używając metody SaveAsPng:

// 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")