Como gerar um código QR em Blazor

Os seguintes passos ajudarão a gerar códigos QR da melhor maneira possível em um aplicativo Blazor Server:

Adicionando Componentes HTML ao Blazor

Primeiro, vamos adicionar algum código HTML à página "Index.razor". O código consiste em alguns títulos, um campo de entrada e botões.

Use o código abaixo para adicionar os componentes ao aplicativo de código de barras 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>

O resultado é o seguinte:

O campo de texto é usado para obter entrada do usuário, e o botão de gerar chamará o método QRCodeGenerater para criar um código QR. O código QR criado será exibido sob o título "Código QR Gerado:". Agora, vamos criar o método QRCodeGenerater.

Crie o Método QRCodeGenerater

É hora de usar a poderosa biblioteca IronBarcode no Visual Studio para gerar códigos QR. A seção @code é adicionada à página "Index.razor". Vamos primeiro ver o código completo abaixo:

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

No código acima, existem duas variáveis de string privadas. qrCode exibirá o código QR gerado, e text obterá a entrada do usuário do campo de entrada. Então, no método QRCodeGenerater, myQRCode é criado usando o método CreateQrCode da classe QRCodeWriter. O método CreateQrCode fornece vários parâmetros para aprimorar a saída do código. Você pode personalizar o tamanho do código QR, definir palavras de código de correção de erro para manter o nível de correção de erro e alterar o QrVersion. O código abaixo ajuda você a trabalhar com outros parâmetros também:

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

Finalmente, o código de barras Blazor gerado é convertido em uma tag HTML e depois para uma string qrCode.

Obtenha mais detalhes sobre as funcionalidades do IronBarcode nesta página de exemplos de código.

Exibir na Página Inicial do Aplicativo Blazor Server

Adicione o código abaixo em componentes HTML na página "Index.razor", após o cabeçalho H4 para exibir qrCode:

@((MarkupString)qrCode)

Salvar Como um Arquivo PNG

Você também pode salvá-lo em um arquivo PNG usando o método 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");