ASP .NET Core - Gerando QR Code

ASP .NET Core - Gerando QR Code - I

No artigo de hoje veremos como gerar QR Code na ASP .NET Core MVC.

Começando com a definição da Wikipédia temos que :

Código QR é um código de barras bidimensional que pode ser facilmente escaneado usando a maioria dos telefones celulares equipados com câmera. Esse código é convertido em texto, um endereço URI, um número de telefone, uma localização georreferenciada, um e-mail, um contato ou um SMS.

Com o aumento do uso de smartphones, os códigos QR também passaram a ser mais utilizados, embora ele tenham sido inicialmente usado para rastrear peças na fabricação de veículos, agora incluem armazenamento de informações pessoais por organizações, emissão de bilhetes de transporte, entretenimento e rastreamento comercial onde juntamente com os códigos de barras, os QR Code também são usados para rotular produtos nas lojas.

Hoje veremos uma forma bem simples de gerar QR Code com ASP .NET Core MVC usando a biblioteca QRCoder.

Criando o projeto ASP .NET Core MVC

Vamos criar um novo projeto no VS 2019 Community chamado Aspc_QRCode usando o template :

A seguir selecione o template Web Application(Model-View-Controller) e clique em Create.

Agora no menu Tools -> Manage Nuget Packages for Solution localize e instale a biblioteca QRCoder no projeto:

Vamos criar um controlador chamado QRCodeController na pasta Controllers do projeto. Este é um controlador do tipo MVC.

Neste arquivo inclua o código abaixo:

using System;
using System.Drawing;
using System.IO;
using Microsoft.AspNetCore.Mvc;
using QRCoder;

namespace Aspc_QRCode.Controllers
{
    public class QRCodeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index(string qrTexto)
        {
            QRCodeGenerator qrGenerator = new QRCodeGenerator();
            QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrTexto,QRCodeGenerator.ECCLevel.Q);
            QRCode qrCode = new QRCode(qrCodeData);
            Bitmap qrCodeImage = qrCode.GetGraphic(20);
            return View(BitmapToBytes(qrCodeImage));
        }

        private static Byte[] BitmapToBytes(Bitmap img)
        {
            using (MemoryStream stream = new MemoryStream())
            {
                img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
                return stream.ToArray();
            }
        }
    }
}

Neste código o método Action [HttpPost] Index recebe uma string qrTexto que irá conter o texto fornecido pelo usuário e que será convertido para uma imagem bitmap QRCode.

O método BitmapToBytes converte o bitmap para um array de bytes.

Vamos agora criar a view Index clicando com o botão direito do mouse sobre o método Index e a seguir selecione as opções a seguir :

E clique no botão Add.

No arquivo Index.cshtml gerado na pasta QRCode inclua o código a seguir:

@model Byte[]
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Gerando QRCode na ASP.NET Core</title>
</head>

<body>
    <div class="container">
        <div id="content">
            <h2>Gerando QR Code na ASP .NET Core</h2>
            <div id="viewContent">
                @using (Html.BeginForm(null, null, FormMethod.Post))
                {
                    <table>
                        <tbody>
                            <tr><td>
                              <label>Informe o texto para gerar o QR Code: </label>
                            </td>
                            <td>
                                <input type="text" name="qrTexto" />
                            </td>
                            </tr>
                            <tr><td colspan="2"><button>Enviar</button></td>
                            </tr>
                        </tbody>
                    </table>
                }
            </div>
            @{
                if (Model != null)
                {
                    <h3>QR Code gerado com sucesso</h3>
                    <img src="@String.Format("data:image/png;base64,{0}", 
                             Convert.ToBase64String(Model))" />
                }
            }
        </div>
    </div>
</body>
</html>

Antes de executar o projeto, ajuste o código do arquivo _Layout.cshtml na pasta Shared para exibir o link para gerar o QR Code:

...
 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
   <ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="QRCode" asp-action="Index">Gerar QR Code</a>
   </li>
  </ul>
 </div>
...

Executando o projeto iremos obter:

Na segunda parte do artigo veremos como salvar o arquivo QR Code gerado.

Pegue o código completo do projeto aqui: Aspc_QRCode.zip

"E (Jesus) disse-lhes: Acautelai-vos e guardai-vos da avareza; porque a vida de qualquer não consiste na abundância do que possui.""
Lucas 12:15

Referências:

José Carlos Macoratti