Introduction
In this article, we will explain how to create a QR Code Generator in ASP.NET Core 1.0, using Zxing.Net.
Background
I tried to create a QR Code Generator in ASP.NET Core, using third party libraries but in most of the cases codes are not fully supported in ASP.NET Core because of some version issues etc. I searched a lot in Google but finally I found “Zxing.Net” and it is a library, which supports decoding and generating of the barcodes. I had a discussion with MicJahn and came up with a great solution.
Before reading this article, you must read the articles given below for ASP.NET Core knowledge.
- GETTING STARTED WITH ASP.NET CORE 1.0
- PROJECT LAYOUT IN ASP.NET CORE 1.0
- MIDDLEWARE AND STATICFILES IN ASP.NET CORE 1.0 – PART 1
- MIDDLEWARE AND STATICFILES IN ASP.NET CORE 1.0 – PART 2
Zxing.Net
A library, which supports decoding and generating of the barcodes (Example: QR Code, PDF 417, EAN, UPC, Aztec, Data Matrix, Codabar) within the images.
Assemblies Required
The assemblies given below are required for QR Code Generator.
using Microsoft.AspNetCore.Razor.TagHelpers; using System; using System.IO; using ZXing.QrCode;
Packages required
We need the packages given below for drawing and creating QR Code Generator.
"CoreCompat.System.Drawing": "1.0.0-beta006", "ZXing.Net": "0.15.0"
C#
QRCodeTagHelper class given below contains QR Code Generator methods etc.
namespace QRCodeApp { [HtmlTargetElement("qrcode")] public class QRCodeTagHelper: TagHelper { public override void Process(TagHelperContext context, TagHelperOutput output) { var QrcodeContent = context.AllAttributes["content"].Value.ToString(); var alt = context.AllAttributes["alt"].Value.ToString(); var width = 250; // width of the Qr Code var height = 250; // height of the Qr Code var margin = 0; var qrCodeWriter = new ZXing.BarcodeWriterPixelData { Format = ZXing.BarcodeFormat.QR_CODE, Options = new QrCodeEncodingOptions { Height = height, Width = width, Margin = margin } }; var pixelData = qrCodeWriter.Write(QrcodeContent); // creating a bitmap from the raw pixel data; if only black and white colors are used it makes no difference // that the pixel data ist BGRA oriented and the bitmap is initialized with RGB using(var bitmap = new System.Drawing.Bitmap(pixelData.Width, pixelData.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb)) using(var ms = new MemoryStream()) { var bitmapData = bitmap.LockBits(new System.Drawing.Rectangle(0, 0, pixelData.Width, pixelData.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppRgb); try { // we assume that the row stride of the bitmap is aligned to 4 byte multiplied by the width of the image System.Runtime.InteropServices.Marshal.Copy(pixelData.Pixels, 0, bitmapData.Scan0, pixelData.Pixels.Length); } finally { bitmap.UnlockBits(bitmapData); } // save to stream as PNG bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png); output.TagName = "img"; output.Attributes.Clear(); output.Attributes.Add("width", width); output.Attributes.Add("height", height); output.Attributes.Add("alt", alt); output.Attributes.Add("src", String.Format("data:image/png;base64,{0}", Convert.ToBase64String(ms.ToArray()))); } } } }
Index.chtml
The code given below will display QR Code Generator.
@{ ViewData["Title"] = "Home"; } <h2>@ViewData["Title"].</h2> <h3>@ViewData["Message"]</h3> A library which supports decoding and generating of barcodes (like QR Code, PDF 417, EAN, UPC, Aztec, Data Matrix, Codabar) within images. <qrcode alt="QR Code" content="https://rajeeshmenoth.wordpress.com/" /> https://rajeeshmenoth.wordpress.com/
_ViewImports.cshtml
The code Injecting TagHelper given below is in the entire Application.
@addTagHelper "*, QRCodeApp"
project.json
The dependencies given below are required to create QR Code Application.
{ "dependencies": { "Microsoft.AspNetCore.Diagnostics": "1.0.0", "Microsoft.AspNetCore.Mvc": "1.1.2", "Microsoft.AspNetCore.Mvc.Core": "1.1.2", "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", "Microsoft.AspNetCore.Server.Kestrel": "1.0.1", "Microsoft.AspNetCore.StaticFiles": "1.1.1", "Microsoft.Extensions.Logging.Console": "1.0.0", "CoreCompat.System.Drawing": "1.0.0-beta006", "ZXing.Net": "0.15.0" }, "tools": { "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final" }, "frameworks": { "net452": { } }, "buildOptions": { "emitEntryPoint": true, "preserveCompilationContext": true }, "publishOptions": { "include": [ "wwwroot", "web.config" ] }, "scripts": { "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ] } }
Output
Reference
See Also
You can download other ASP.NET Core 1.0 source codes from MSDN Code, using the links, mentioned below.
- Middleware And Staticfiles In ASP.NET Core 1.0 – Part One
- Middleware And Staticfiles In ASP.NET Core 1.0 – Part Two
- Create An Aurelia Single Page Application In ASP.NET Core 1.0
- Create Rest API Or Web API With ASP.NET Core 1.0
- Adding A Configuration Source File In ASP.NET Core 1.0
- Code First Migration – ASP.NET Core MVC With EntityFrameWork Core
- Send Email Using ASP.NET CORE 1.1 With MailKit In VisualStudio 2017
Conclusion
We learnt how to create a QR Code Generator in ASP.NET Core 1.0 Using Zxing.Net. I hope, you liked this article. Please share your valuable suggestions and feedback.
Can you please provide an example of decoding the barcodes as well in VS2017 using ZXing.Net. I’ve tried to set up the project ASP.NET Core and followed the https://github.com/micjahn/ZXing.Net/tree/master/Clients/ASP.NetCoreDemo demo.
However, I am having trouble setting up the adapters for it. In https://github.com/micjahn/ZXing.Net/blob/master/Clients/ASP.NetCoreDemo/Controllers/HomeController.cs how should I include the adapters in VS2017 project so that the namespace such as ZXing.ImageSharp.BarcodeReader() does not throw namespace missing assembly error..
Not even tried but I will check it.