Generate QR Code in .NET Core Using Bitmap

Introduction

As per Wikipedia, 'QR code' (abbreviated from Quick Response code) is the trademark for a type of matrix barcode (or two-dimensional barcode) is a machine-readable optical label that contains information about the item to which it is attached.

QR Codes can also be found in more and more places in our daily lives. Although they were initially used to track parts in the manufacturing of vehicles, now these include storing personal information by organizations, transport ticketing, entertainment & commercial tracking. Along with bar codes, QR codes are also in use for product labelling in stores. Companies providing discount offers by scanning QR Codes using your smartphones.

So, let's create a .NET Core application and see how a QR code is generated.

Step 1

Let's create a .NET Core MVC application.

File >> New Project >> ASP .NET Core Web Application >> Choose MVC as Web Template

Generate QR Code In .NET Core Using Bitmap

Step 2

Install QRCoder via NuGet Package Manager. Also, you can add the package through Nuget Package manager console following this command:

Install-Package QRCoder.

Step 3

Add another package Microsoft.AspNetCore.Mvc.TagHelpers through Nuget, as we use the tag helper to access the controller.

Step 4

Now add the below design in "Index.cshtml". We have taken one input field and typed some text, then clicked on the button so that it will generate QR Code for us.

Below is the Index.cshtml code:

@model Byte[]
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
@section Scripts{
}
<form asp-action="Index" asp-controller="Home" asp-antiforgery="true">
<div class="container">
<div class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">Generate QR Code</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">Type text to generate QR Code</div>
<div class="col-md-9"><input type="text" class="form-control" id="txtQRCode" name="txtQRCode" /></div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-9">
<input type="submit" class="btn btn-primary" id="btnSubmit" value="Generate QR Code" autocomplete="off" />
</div>
</div>
</div>
@{
if (Model != null)
{
<div class="row mt-3">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-9">
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" height="300" width="300"/>
</div>
</div>
</div>
}
}
</div>
</div>
</div>
</div>
</form>

Code Explanation

We use the Taghelper class to call the controller and take whatever we type in an input box, then send it to the action method when the button is clicked.
Once the QR Code is generated by the Index Action method, ‘byte’ array is returned to the View as a model and then the bitmap image is displayed via the below code:
1. if (Model != null)
2. {
3. <div class="row mt-3">
4. <div class="col-md-12">
5. <div class="col-md-3"></div>
6. <div class="col-md-9">
7. <img src="@String.Format("data:image/png;base64,{0}",
8. Convert.ToBase64String(Model))" height="300" width="300"/>
9. </div>
10. </div>
11. </div>
12. }

Step 5

Add the Index Post method inside the Home controller like below.

[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult Index(string txtQRCode) {
QRCodeGenerator _qrCode = new QRCodeGenerator();
QRCodeData _qrCodeData = _qrCode.CreateQrCode(txtQRCode,QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(_qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
return View(BitmapToBytesCode(qrCodeImage));
}
[NonAction]
private static Byte[] BitmapToBytesCode(Bitmap image)
{
using (MemoryStream stream = new MemoryStream())
{
image.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
return stream.ToArray();
}
}

Code Explanation

This Index Action receives a string parameter. It contains the text that is provided by an Input control defined in the View. This text will be converted to QR Code Bitmap image.
The QRCode object ('qrCode') defined calls a static function called 'BitmapToBytesCode()'. The role of this function is to convert the Bitmap image to 'Byte[]'.

Step 6

Now run the application and see the output like below. Type the text in the input box and hit enter on Button it will generate the Bitmap Image like above. Then scan the QR Code and you can see the text.

When we scan any QR Code reader using mobile or anything else, you can get the result.

Github link.

4 Comments

Join the conversation! Your thoughts help the community grow.

Bob McLelland4y ago
Thank you! One of the few examples on the Internet that works error free. However, I did discover this. It did NOT work for me using Visual Studio 2022 with .NET 6. I started over and backed the project down using Visual Studio 2019 with .NET 5 and it worked perfectly. Thanks again Jayant!
- Tân Hà Công4y ago
  I faced the same problem.but can not downgrade the Visual Studio version, have some one can get some solution?thanks
Sanjay Shekhawat6y ago
Thanks dear
- Jayant Tripathy6y ago
  Glad to know it help Sanjay Shekhawat.