Cómo Generar Código QR en Blazor

Los siguientes pasos te ayudarán a generar códigos QR de la mejor manera posible en una aplicación Blazor Server:

Agregar componentes HTML de Blazor

Primero, vamos a agregar algo de código HTML a la página "Index.razor". El código consiste en algunos encabezados, un campo de entrada y botones.

Utiliza el siguiente código para agregar los componentes a la aplicación de código de barras 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>

El resultado es el siguiente:

El campo de texto se usa para obtener la entrada del usuario, y el botón de generar llamará al método QRCodeGenerater para crear un código QR. El código QR creado se mostrará bajo el encabezado "Código QR Generado:". Ahora, vamos a crear el método QRCodeGenerater.

Crear el método QRCodeGenerater

Es hora de usar la poderosa biblioteca IronBarcode en Visual Studio para generar códigos QR. La sección @code se agrega a la página "Index.razor". Primero veamos el código completo a continuación:

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

En el código anterior, hay dos variables privadas de tipo cadena. qrCode mostrará el código QR generado, y text obtendrá la entrada del usuario desde el campo de entrada. Luego, en el método QRCodeGenerater, myQRCode se crea usando el método CreateQrCode de la clase QRCodeWriter. El método CreateQrCode proporciona varios parámetros para mejorar la salida del código. Puedes personalizar el tamaño del código QR, establecer palabras de corrección de errores para mantener el nivel de corrección de errores y cambiar la QrVersion. El código a continuación te ayuda a trabajar con otros parámetros también:

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

Finalmente, el código de barras Blazor generado se convierte en una etiqueta HTML y luego en una cadena qrCode.

Obtén más detalles sobre las características de IronBarcode desde esta página de ejemplos de código.

Mostrar en la página de inicio de la aplicación Blazor Server

Agrega el siguiente código en los componentes HTML en la página "Index.razor", después del encabezado H4 para mostrar qrCode:

@((MarkupString)qrCode)

Guardar como archivo PNG

También puedes guardarlo en un archivo PNG utilizando el 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");

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