Artigo original: How to easily implement QRCoder in ASP.NET Core using C#
Escrito por: Yogi
O QRCoder é uma biblioteca de implementação de QR Code bastante popular e escrita em C#. Ela está disponível no GitHub. Aqui, implementaremos a biblioteca QRCoder para gerar QR Codes em uma aplicação do ASP.NET Core. Para isso, usarei o C#.
Implementarei o QRCoder de três maneiras:
1. Criando uma imagem de bitmap de QR Code para qualquer texto.
2. Criando um arquivo de QR Code (.qrr) para qualquer texto e salvando esses arquivos em uma aplicação.
3. Lendo e exibindo todos os arquivos de QR Code (.qrr).
Vamos começar com a instalação do QRCoder no ASP.NET Core Framework (texto em inglês).
Você pode fazer o download do código completo no repositório do GitHub do autor.
Instalação
Instale o QRCoder usando o NuGet Package Manager. Se quiser usar o NuGet, basta procurar por "QRCoder" ou executar o seguinte comando no console do NuGet Package Manager:
PM> Install-Package QRCoder
O QRCoder será instalado rapidamente e estará pronto para ser usado.
Vamos começar com a implementação do QRCoder das três maneiras que mencionamos acima.
Criando uma imagem de bitmap de QR Code para qualquer texto
Crie um Controller chamado 'QRCoderController' na pasta Controllers. O controller será criado e terá nele apenas um método de ação (do inglês, Action Method), chamado 'Index':
public IActionResult Index()
{
return View();
}Importe os namespaces abaixo no controller:
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using Microsoft.AspNetCore.Mvc;
using QRCoder;Em seguida, adicione a ação Index do tipo [HttpPost] ao controller:
[HttpPost]
public IActionResult Index(string qrText)
{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText,
QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
return View(BitmapToBytes(qrCodeImage));
}Essa ação Index recebe um parâmetro de chamado 'qrText'. Ele contém o texto fornecido por um controle de Input definido na View. Esse texto será convertido na imagem de bitmap de QR Code. As linhas de código abaixo são responsáveis por esse trabalho:
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);O objeto QRCode ('qrCode') definido chama a função estática 'BitmapToBytes()'. O papel dessa função é converter a imagem de bitmap em 'Byte[]'.
Adicione a função ao controller:
private static Byte[] BitmapToBytes(Bitmap img)
{
using (MemoryStream stream = new MemoryStream())
{
img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
return stream.ToArray();
}
}Por fim, crie a view Index dentro da pasta 'Views/QRCoder' com o código abaixo:
@model Byte[]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Implementing QRCoder in ASP.NET Core - Create QR Code</title>
<style>
body {
background: #111 no-repeat;
background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
}
h1,
h2,
h3 {
text-align: center;
color: #FFF;
margin: 5px 0;
}
h1 {
font-size: 30px;
}
h2 a {
font-size: 25px;
color: #0184e3;
text-decoration: none;
}
h3 {
font-size: 23px;
border-bottom: solid 3px #CCC;
padding-bottom: 10px;
}
h3 a {
color: #00e8ff;
text-decoration: none;
}
h3 a:hover,
h2 a:hover {
text-decoration: underline;
}
.container {
width: 800px;
margin: auto;
color: #FFF;
font-size: 25px;
}
.container #content {
border: dashed 2px #CCC;
padding: 10px;
}
#reset {
padding: 5px 10px;
background: #4CAF50;
border: none;
color: #FFF;
cursor: pointer;
}
#reset:hover {
color: #4CAF50;
background: #FFF;
}
#viewContent table {
width: 100%;
}
#viewContent table tr {
height: 80px;
background: darkcyan;
}
#viewContent table tr td {
width: 50%;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="container">
<div id="content">
<h1>Implementing QRCoder in ASP.NET Core - Create QR Code</h1>
<h2>
<a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
<button id="reset" onclick="location=''">Reset »</button>
</h2>
<div id="viewContent">
@using (Html.BeginForm(null, null, FormMethod.Post)) {
<table>
<tbody>
<tr>
<td>
<label>Enter text for creating QR Code</label
</td>
<td>
<input type="text" name="qrText" />
</td>
</tr>
<tr>
<td colspan="2">
<button>Submit</button>
</td>
</tr>
</tbody>
</table>
}
</div>
@{
if (Model != null)
{
<h3>QR Code Successfully Generated</h3>
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" />
}
}
</div>
</div>
</body>
</html>A view Index View tem um controle 'input'. O usuário insere seu texto nesse controle para criar o QR Code:
<input type="text" name="qrText" />
Quando o QR Code é gerado pelo método de ação de Index, seu array 'byte' é retornado à View como um modelo e a imagem de bitmap é exibida pelo código abaixo:
@{
if (Model != null)
{
<h3>QR Code Successfully Generated</h3>
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" />
}
}Testando o código
Execute sua aplicação e vá para o URL — 'http://localhost:50755/QRCoder' para invocar o método de ação de Index.
Na caixa de texto, adicione o texto e clique no botão de envio para criar a imagem de bitmap do QR Code.
A imagem a seguir ilustra o funcionamento:
Criando o arquivo de QR Code (.qrr) para qualquer texto e salvando esses arquivos na aplicação
Você também pode gerar arquivos de QR Code para um texto e salvá-los no seu site da web. Esses arquivos terão uma extensão .qrr.
Adicione os seguintes métodos de ação ao seu controller. Eles serão chamados de 'GenerateFile' (em português, gerar arquivos):
public IActionResult GenerateFile()
{
return View();
}
[HttpPost]
public IActionResult GenerateFile(string qrText)
{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q);
string fileGuid = Guid.NewGuid().ToString().Substring(0, 4);
qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);
QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);
QRCode qrCode = new QRCode(qrCodeData1);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
return View(BitmapToBytes(qrCodeImage));
}A versão [HttpPost] desse método de ação gera os arquivos de QR Code dentro da pasta 'wwwroot/qrr'. O código que faz isso funcionar é:
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q);
string fileGuid = Guid.NewGuid().ToString().Substring(0, 4);
qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);Quando o arquivo .qrr é criado, simplesmente fazemos a leitura dele a partir do local onde foi salvo no site da web. Em seguida, fazemos a conversão para o tipo bitmap e, por fim, enviamos os bytes da imagem para a view. O código correspondente é:
QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);
QRCode qrCode = new QRCode(qrCodeData1);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
return View(BitmapToBytes(qrCodeImage));Em seguida, adicionamos a view GenerateFile à pasta 'Views/QRCoder' e adicionamos a ela o seguinte código:
@model Byte[]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Implementing QRCoder in ASP.NET Core - Create QR Code File</title>
<style>
body {
background: #111 no-repeat;
background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
}
h1,
h2,
h3 {
text-align: center;
color: #FFF;
margin: 5px 0;
}
h1 {
font-size: 30px;
}
h2 a {
font-size: 25px;
color: #0184e3;
text-decoration: none;
}
h3 {
font-size: 23px;
border-bottom: solid 3px #CCC;
padding-bottom: 10px;
}
h3 a {
color: #00e8ff;
text-decoration: none;
}
h3 a:hover,
h2 a:hover {
text-decoration: underline;
}
.container {
width: 800px;
margin: auto;
color: #FFF;
font-size: 25px;
}
.container #content {
border: dashed 2px #CCC;
padding: 10px;
}
#reset {
padding: 5px 10px;
background: #4CAF50;
border: none;
color: #FFF;
cursor: pointer;
}
#reset:hover {
color: #4CAF50;
background: #FFF;
}
#viewContent table {
width: 100%;
}
#viewContent table tr {
height: 80px;
background: darkcyan;
}
#viewContent table tr td {
width: 50%;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="container">
<div id="content">
<h1>Implementing QRCoder in ASP.NET Core - Create QR Code File</h1>
<h2>
<a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
<button id="reset" onclick="location=''">Reset »</button>
</h2>
<div id="viewContent">
@using (Html.BeginForm(null, null, FormMethod.Post)) {
<table>
<tbody>
<tr>
<td>
<label>Enter text for creating QR File</label>
</td>
<td>
<input type="text" name="qrText" />
</td>
</tr>
<tr>
<td colspan="2">
<button>Submit</button>
</td>
</tr>
</tbody>
</table>
}
</div>
@{ if (Model != null) {
<h3>QR Code file Successfully Generated</h3>
<img src="@String.Format(" data:image/png;base64,{0} ", Convert.ToBase64String(Model))" /> } }
</div>
</div>
</body>
</html>O código dessa View é bastante similar ao da view 'Index' e funciona da mesma maneira.
O URL a ser chamado a partir dessa View é 'http://localhost:50755/QRCoder/GenerateFile'.
Lendo e exibindo todos os arquivos de QR Code (.qrr)
Você também pode ler todos os arquivos .qrr salvos no site da web. Vá para o controller e adicione uma nova ação chamada 'ViewFile':
public IActionResult ViewFile()
{
List<KeyValuePair<string, Byte[]>> fileData=new List<KeyValuePair<string, byte[]>>();
KeyValuePair<string, Byte[]> data;
string[] files = Directory.GetFiles("wwwroot/qrr");
foreach (string file in files)
{
QRCodeData qrCodeData = new QRCodeData(file, QRCodeData.Compression.Uncompressed);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
Byte[] byteData = BitmapToBytes(qrCodeImage);
data = new KeyValuePair<string, Byte[]>(Path.GetFileName(file), byteData);
fileData.Add(data);
}
return View(fileData);
}Nesse método de ação, lemos os arquivos localizados na pasta 'qrr' usando este código:
Directory.GetFiles("wwwroot/qrr")Em seguida, adicionamos o nome e os bytes de cada arquivo qrr no objeto List<KeyValuePair<string, Byte[]>>.
O objeto é retornado à View no final:
return View(fileData);Por fim, criamos a view 'ViewFile' na pasta 'Views/QRCoder' com o seguinte código:
@model List
<KeyValuePair<string, Byte[]>>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Implementing QRCoder in ASP.NET Core - View QR Code Files</title>
<style>
body {
background: #111 no-repeat;
background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
}
h1,
h2,
h3 {
text-align: center;
color: #FFF;
margin: 5px 0;
}
h1 {
font-size: 30px;
}
h2 a {
font-size: 25px;
color: #0184e3;
text-decoration: none;
}
h3 {
font-size: 23px;
border-bottom: solid 3px #CCC;
padding-bottom: 10px;
}
h3 a {
color: #00e8ff;
text-decoration: none;
}
h3 a:hover,
h2 a:hover {
text-decoration: underline;
}
.container {
width: 800px;
margin: auto;
color: #FFF;
font-size: 25px;
}
.container #content {
border: dashed 2px #CCC;
padding: 10px;
}
#reset {
padding: 5px 10px;
background: #4CAF50;
border: none;
color: #FFF;
cursor: pointer;
}
#reset:hover {
color: #4CAF50;
background: #FFF;
}
#viewContent table {
width: 100%;
}
#viewContent table tr {
height: 80px;
background: darkcyan;
}
#viewContent table tr td {
width: 50%;
padding-left: 5px;
}
#viewContent table tr td img {
width: 150px;
}
#viewContent table tr td span {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div id="content">
<h1>Implementing QRCoder in ASP.NET Core - View QR Code Files</h1>
<h2>
<a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
<button id="reset" onclick="location=''">Reset »</button>
</h2>
<div id="viewContent">
<table>
<tbody>
@foreach (KeyValuePair
<string, Byte[]> k in Model) {
<tr>
<td>
<img src="@String.Format(" data:image/png;base64,{0} ", Convert.ToBase64String(k.Value))" />
<span>@k.Key</span>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Essa View exibirá todos os arquivos qrr como imagens de bitmap dentro de uma tabela 'HTML'. O código abaixo cria a tabela HTML:
<table>
<tbody>
@foreach (KeyValuePair<string, Byte[]> k in Model)
{
<tr>
<td>
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(k.Value))" />
<span>@k.Key</span>
</td>
</tr>
}
</tbody>
</table>Testando o código
Execute sua aplicação e vá para o URL 'http://localhost:50755/QRCoder/ViewFile' para invocar o método de ação ViewFile. Você verá todos os arquivos .qrr salvos em seu site da web.
A imagem abaixo mostra o código em execução:
Você pode fazer o download do código completo no repositório do GitHub do autor.
Conclusão
Espero que você goste do repositório, que ajudará você a usar a biblioteca QRCoder em seus projetos do ASP.NET Core. Lembre-se de deixar uma estrela no repositório caso tenha gostado do tutorial.
No momento da criação deste artigo, o autor publicava artigos semanais sobre desenvolvimento para a web. Compartilhar o artigo ajuda a motivar os autores a escreverem mais artigos para leitores como você.
O autor também publicou um outro artigo pelo freeCodeCamp sobre Como criar um recurso de login com um modal do Bootstrap e jQuery AJAX (texto em inglês).
Agradecemos a leitura! Boa programação para você!