QRCoder - очень популярная библиотека для реализации QR-кода, написанная на C #. Он доступен в GitHub. Здесь я собираюсь реализовать библиотеку QRCoder для генерации QR-кодов в моем приложении ASP.NET Core. Я также буду использовать C #.
Я буду реализовывать QRCoder тремя способами:
1. Создайте растровое изображение QR-кода для любого текста.
2. Создайте файл QR-кода (.qrr) для любого текста, а затем сохраните эти файлы в приложении.
3. Прочтите и отобразите все файлы QR-кода (.qrr).
Начнем с установки QRCoder в платформе ASP.NET Core.
Вы можете загрузить полный код из моего репозитория GitHub.
Установка
Установите QRCoder через диспетчер пакетов NuGet. Если вы хотите использовать NuGet, просто найдите «QRCoder» или выполните следующую команду в консоли диспетчера пакетов NuGet:
PM> Install-Package QRCoder
QRCoder установится через 1 минуту и будет готов к использованию.
Теперь давайте начнем с реализации QRCoder тремя способами, упомянутыми выше.
Создание растрового изображения QR-кода для любого текста
Создайте новый контроллер с именем «QRCoderController» внутри папки «Контроллеры». Контроллер будет создан, и в нем будет только один метод действия с именем «Index»:
public IActionResult Index()
{
return View();
}
Импортируйте следующие пространства имен в контроллер:
using System; using System.Collections.Generic; using System.Drawing; using System.IO; using Microsoft.AspNetCore.Mvc; using QRCoder;
Затем добавьте к контроллеру действие индексации типа [HttpPost]:
[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));
}
Это действие индекса получает строковый параметр под названием «qrText». Он содержит текст, который предоставляется элементом управления вводом, определенным в представлении. Этот текст будет преобразован в растровое изображение QR-кода. Следующие строки кода выполняют эту работу:
QRCodeGenerator qrGenerator = new QRCodeGenerator(); QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q); QRCode qrCode = new QRCode(qrCodeData); Bitmap qrCodeImage = qrCode.GetGraphic(20);
Определенный объект QRCode (‘qrCode’) вызывает статическую функцию под названием ‘BitmapToBytes()’. Роль этой функции - преобразовать растровое изображение в «Byte[]».
Добавьте эту функцию в свой контроллер:
private static Byte[] BitmapToBytes(Bitmap img)
{
using (MemoryStream stream = new MemoryStream())
{
img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
return stream.ToArray();
}
}
Наконец, создайте представление индекса внутри папки «Views/QRCoder» со следующим кодом:
@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>
В представлении индекса есть элемент управления «input». Пользователь вводит свой текст в этот элемент управления, чтобы создать QR-код:
<input type="text" name="qrText" />
После того, как QR-код сгенерирован методом Index Action, его массив ‘byte’ возвращается в View as model, а затем растровое изображение отображается с помощью следующего кода:
@{
if (Model != null)
{
<h3>QR Code Successfully Generated</h3>
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" />
}
}
Проверка кода
Запустите приложение и перейдите по URL-адресу - ‘http://localhost:50755/QRCoder’, чтобы вызвать метод Index Action.
В текстовое поле добавьте свой текст и нажмите кнопку отправки, чтобы создать растровое изображение QR-кода.
Смотрите это изображение, которое иллюстрирует его работу:
Создайте файл QR-кода (.qrr) для любого текста, а затем сохраните эти файлы в приложении
Вы также можете сгенерировать файлы QR-кода для текста и сохранить их на своем веб-сайте. Эти файлы имеют расширение. qrr.
К вашему контроллеру добавьте следующие методы действия, называемые «GenerateFile»:
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));
}
[HttpPost] версия этого метода действия создает файлы QR-кода в папке «wwwroot/qrr». Код, выполняющий эту работу, следующий:
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);
После создания файла .qrr я просто читаю его в поисках сохраненного местоположения на веб-сайте. Затем я конвертирую его в тип Bitmap и, наконец, отправляю байты изображения в представление. Соответствующий код:
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));
Затем добавьте представление GenerateFile в папку «Views/QRCoder» и добавьте в него следующий код:
@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>
Код этого представления в точности аналогичен представлению «Индекс» и работает точно так же.
URL для вызова этого представления - «http://localhost:50755/QRCoder/GenerateFile».
Чтение и отображение всех файлов QR-кода (.qrr)
Вы также можете прочитать все файлы .qrr, сохраненные на веб-сайте. Перейдите к контроллеру и добавьте новое действие под названием «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);
}
В этом методе действия я читаю файл, расположенный в папке «qrr», используя код:
Directory.GetFiles("wwwroot/qrr")
Затем я добавляю байты и имена каждого qrr-файла в объект List<KeyValuePair<string, Byte[]>>.
Этот объект возвращается в представление в конце:
return View(fileData);
Наконец, создайте представление «ViewFile» внутри папки «Views/QRCoder» со следующим кодом:
@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>
В этом представлении все файлы qrr отображаются в виде растровых изображений внутри таблицы «HTML». Приведенный ниже код создает таблицу 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>
Проверка кода
Запустите приложение и перейдите по URL-адресу - «http://localhost:50755/QRCoder/ViewFile», чтобы вызвать метод действия ViewFile. Вы увидите все файлы .qrr, сохраненные на вашем веб-сайте.
См. Изображение ниже, которое иллюстрирует его работу:
Вы можете загрузить полный код из моего репозитория GitHub.
Заключение
Надеюсь, вам понравится этот репозиторий, который поможет вам использовать QRCoder в вашем проекте ASP.NET Core. Убедитесь, что вам нравится этот репозиторий, чтобы выразить ему свою любовь.
Если вам нужна помощь в ASP.NET Core, дайте мне знать в разделе комментариев ниже.
Я публикую 2 статьи о веб-разработке в неделю. Подписывайтесь на меня и получайте уведомления по электронной почте всякий раз, когда я публикую новый учебник на Medium. Если этот пост был вам полезен, пожалуйста, нажмите кнопку хлопка несколько раз, чтобы выразить свою поддержку! Это вызовет у меня улыбку и побудит меня больше писать для таких читателей, как вы.
Я также опубликовал еще один учебник по freeCodeCamp, если вы тоже хотите его увидеть - Как создать функцию входа в систему с помощью Bootstrap Modal и jQuery AJAX
Спасибо и удачного кодирования!
