What is QR Code?

QR stands for "Quick Response". QR Code is a two dimensional version of barcode which stores small piece of information in it and the information is hidden from outside world. Information contains plain text, URL, email address, product’s unique information etc… QR Code is very popular now a days and used mostly in packaging of product to store details about product.

In this blog we will learn How to generate QR Code and display and save QR Code image to folder in asp.net using c#. I have two ways to generate QR Code.

  1. Using Google Chart API
  2. Using QRCoder - .Net library

You can use any of above method according to your preference.

Generate QR Code using Google Chart API

Google Chart API basically provides a url with some parameters. We simply need to call this url and url respond with QR code image.

For Example, open following url in browser. It will return QR Code. Scan it and you will see text "QR Code by Google APP".

http://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=QR%20Code%20by%20Google%20API

To generate this type of QR Code using url you need to pass parameters describe below. All these three parameters are required.

  • cht=qr - Specifies that it is a QR Code
  • chs=250x250 - Specifies the width and height of image. (WidthxHeight)
  • chl=Data -  Specifies data to be stored in image. It can be plain text, url anything.

Now following are the steps to create QR Code.

Step 1. Create asp.net page with three textbox and one button. User will enter text, width and height of QR Code. Generated QR Code will be display below it and also save into folder. Also create folder in your project with name "QRCodes" where image will be save.

Step to create new page: Right click on project-> Add-> Add New Item-> Select Web Form-> Add.

Step to create new folder: Right click on project-> Add-> New Folder.

QRCodeUsingGoogleAPI.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="QRCodeUsingGoogleAPI.aspx.cs" Inherits="QRCodeUsingGoogleAPI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Generate QR Code using Google Chart API</title>

    <style type="text/css">

        h2, table {

            display: table;

            margin: 40px auto;

        }

            table tr td {

                padding: 0px 10px 10px 0px;

            }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <h2>Generate QR Code using Google Chart API</h2>

            <table>

                <tr>

                    <td>QR Code Text

                    </td>

                    <td>

                        <asp:TextBox ID="txtQRCodeText" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td>Width

                    </td>

                    <td>

                        <asp:TextBox ID="txtWidth" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td>Height

                    </td>

                    <td>

                        <asp:TextBox ID="txtHeight" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <asp:Button Text="Generate QR Code" ID="btnGenerateQRCode" runat="server" OnClick="btnGenerateQRCode_Click" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <asp:Image ID="imageQR" runat="server" />

                    </td>

                </tr>

            </table>

        </div>

    </form>

</body>

</html>

QRCodeUsingGoogleAPI.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Net; /* Add this Namespace */

using System.IO; /* Add this Namespace */

  

public partial class QRCodeUsingGoogleAPI : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

  

    }

  

    /* Button click event */

    protected void btnGenerateQRCode_Click(object sender, EventArgs e)

    {

        /* Image name and its path to store */

        string FileName = "QR" + DateTime.Now.ToString("ddMMyyyyHHmmss") + ".jpg", FilePath = HttpContext.Current.Server.MapPath("~/QRCodes/");

  

        /* Call Google API url with Width, Height and Text */

        var url = "http://chart.apis.google.com/chart?cht=qr&chs=" + txtWidth.Text + "x" + txtHeight.Text + "&chl=" + txtQRCodeText.Text;

        WebResponse response = default(WebResponse);

        Stream remoteStream = default(Stream);

        StreamReader readStream = default(StreamReader);

        WebRequest request = WebRequest.Create(url);

        response = request.GetResponse();

        remoteStream = response.GetResponseStream();

        readStream = new StreamReader(remoteStream);

        System.Drawing.Image img = System.Drawing.Image.FromStream(remoteStream);

        img.Save(FilePath + FileName); /* Save image to folder */

        response.Close();

        remoteStream.Close();

        readStream.Close();

        imageQR.ImageUrl = "~/QRCodes/" + FileName; /* Display image on page */

    }

}

QR Code image is also saved in "QRCodes" folder in project.

Generate QR Code using QRCoder - .Net library

QRCoder is a .Net library which you can download from Download QRCoder link or from google. Following are steps to implement this library. But before starting please read its license terms carefully.

Step 1.  Add QRCoder.dll to project. To add it Right click to project and select Add Reference… option.

Step 2. As you click on Add Reference, it will open a new window. Click Browse button and select you QRCoder.dll from proper path. Click on Add button and then OK button. QRCoder.dll will be add to your project in Bin folder.

Step 3. Now create asp.net page to write code for QRCoder.dll. Please read my comments to understand code properly.

QRCodeUsingQRCoder.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="QRCodeUsingQRCoder.aspx.cs" Inherits="QRCodeUsingQRCoder" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Generate QR Code using QRCoder - .Net Library</title>

    <style type="text/css">

        h2, table {

            display: table;

            margin: 40px auto;

        }

            table tr td {

                padding: 0px 10px 10px 0px;

            }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <h2>Generate QR Code using QRCoder - .Net Library</h2>

            <table>

                <tr>

                    <td>QR Code Text

                    </td>

                    <td>

                        <asp:TextBox ID="txtQRCodeText" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td>Width

                    </td>

                    <td>

                        <asp:TextBox ID="txtWidth" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td>Height

                    </td>

                    <td>

                        <asp:TextBox ID="txtHeight" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <asp:Button Text="Generate QR Code" ID="btnGenerateQRCode" runat="server" OnClick="btnGenerateQRCode_Click" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <asp:Image ID="imageQR" runat="server" />

                    </td>

                </tr>

            </table>

        </div>

    </form>

</body>

</html>

QRCodeUsingQRCoder.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using QRCoder; /* Add this Namespace */

using System.Drawing; /* Add this Namespace */

using System.IO; /* Add this Namespace */

  

public partial class QRCodeUsingQRCoder : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

  

    }

  

    /* Button click event */

    protected void btnGenerateQRCode_Click(object sender, EventArgs e)

    {

        /* Image name and its path to store */

        string FileName = "QR" + DateTime.Now.ToString("ddMMyyyyHHmmss") + ".jpg", FilePath = HttpContext.Current.Server.MapPath("~/QRCodes/");

  

        /* Generate QRCode with Width, Height and Text */

        QRCodeGenerator qrGenerator = new QRCodeGenerator();

        QRCodeGenerator.QRCode qrCode = qrGenerator.CreateQrCode(txtQRCodeText.Text, QRCodeGenerator.ECCLevel.Q);

        imageQR.Height = Unit.Parse(txtHeight.Text);

        imageQR.Width = Unit.Parse(txtWidth.Text);

        using (Bitmap bitMap = qrCode.GetGraphic(20))

        {

            using (MemoryStream ms = new MemoryStream())

            {

                bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

                byte[] byteImage = ms.ToArray();

                File.WriteAllBytes(FilePath + FileName, byteImage); /* Save image to folder */

                imageQR.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(byteImage); /* Display image on page */

            }

        }

    }

}

QR Code image is also saved in "QRCodes" folder in project.

Hope this blog will help you. Comment below to ask questions. Thank you..!!