Note : This Article Participated in TechNet Guru Competition May 2017 and won Silver Medal.

Introduction


In this article, we will explain how to create a QR Code Generator in ASP.NET Core 1.0, using Zxing.Net.

Background


We 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. We searched a lot in Google but finally I found "Zxing.Net" and it is a library, which supports decoding and generating of the barcodes. We 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.

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/" /> 

_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

Downloads


You can download ASP.NET Core 1.0 source code from the MSDN Code, using the links, mentioned below.

See Also


It's recommended to read more articles related to ASP.NET Core.