ASP.NET QRCode

Neste artigo vamos aprender a gerar um QRCode via ASP.NET Core de forma simples e rápida.

Versão em vídeo

QRCoder

Para facilitar nosso trabalho, vamos utilizar um pacote chamado QRCoder, um projeto Open Source disponível no GitHub e via Nuget.

dotnet new mvc -o MeuApp
cd MeuApp
dotnet add package QRCoder

Pronto, temos nosso projeto criado com o pacote necessário para começarmos.

Organizando o projeto

A ideia aqui é criar uma classe que vai permitir o reuso do QRCode em diferentes pontos do nosso App.

O pacote em sí já faz muita coisa, mas parte de gerar imagens, particulamente prefiro separar para um reuso ainda maior.

Gerando o QRCode

O trecho para gerar um QRCode utilizando o QRCoder é bem simples, precisamos do QRCodeGenerator e dos dados do QRCode.

var qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode(url, QRCodeGenerator.ECCLevel.Q);
var qrCode = new QRCode(qrCodeData);
var qrCodeImage = qrCode.GetGraphic(10);
return qrCodeImage;

Para ficar ainda melhor, vamos separar este código em um método que já retorna um Bitmap. Isto vai nos ajudar em todo processo.

public static Bitmap GenerateImage(string url)
{
    var qrGenerator = new QRCodeGenerator();
    var qrCodeData = qrGenerator.CreateQrCode(url, QRCodeGenerator.ECCLevel.Q);
    var qrCode = new QRCode(qrCodeData);
    var qrCodeImage = qrCode.GetGraphic(10);
    return qrCodeImage;
}

Em alguns pontos também precisei dos bytes da imagem ao invés do Bitmap, então decidi criar dois métodos adicionais, um para retornar os bytes da imagem e outro para retornar os bytes dado uma URL.

public static byte[] GenerateByteArray(string url)
{
    var image = GenerateImage(url);
    return ImageToByte(image);
}

private static byte[] ImageToByte(Image img)
{
    using var stream = new MemoryStream();
    img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
    return stream.ToArray();
}

Como resultado final, nossa classe ficou com os seguintes métodos.

public static class QrCodeGenerator
{
    public static Bitmap GenerateImage(string url)
    {
        var qrGenerator = new QRCodeGenerator();
        var qrCodeData = qrGenerator.CreateQrCode(url, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new QRCode(qrCodeData);
        var qrCodeImage = qrCode.GetGraphic(10);
        return qrCodeImage;
    }

    public static byte[] GenerateByteArray(string url)
    {
        var image = GenerateImage(url);
        return ImageToByte(image);
    }

    private static byte[] ImageToByte(Image img)
    {
        using var stream = new MemoryStream();
        img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
        return stream.ToArray();
    }
}

Utilizando o QRCode

Agora tudo que temos a fazer é chamar nosso gerador em algum método do controlador.

var image = QrCodeGenerator.GenerateByteArray("https://balta.io");

Com a imagem gerada, podemos responder com um FileResult passando os bytes da imagem e o Mime/Type.

[HttpGet("qrcode")]
public IActionResult GetQrCode()
{
    var image = QrCodeGenerator.GenerateByteArray("https://balta.io");
    return File(image, "image/jpeg");
}

Desta forma, ao executar nossa aplicação, teremos o QRCode sendo exibido na URL abaixo.

https://localhost:5001/qrcode

Utilizando no HTML

Para renderizar o QRCode na tela, basta utilizar a tag img com a URL anterior.

<img src="https://localhost:5001/qrcode" />

Pronto! Temos um gerador de QRCode com ASP.NET.