In this article I will explain with an example, how to generate QRCode with Logo (Image) in center in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Installing QRCoder package using Nuget

In order to install QRCoder library using Nuget, please refer my article Install QRCoder library using Nuget.
 
 

Logo Location

The Logo image is saved in the Folder (Directory) named images.
ASP.Net MVC: Generate QRCode with Logo (Image) in Center
 
 

Namespaces

You will need to import the following namespaces.
using QRCoder;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
 
 

Controllers

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

This Action method accepts the TextBox value as a parameter.
Inside this Action method, the QRCode object is generated using the text provided by the User with the help of QRCodeGenerator and QRCode class.
Then, two Bitmaps are created, one for the QRCode and another for the Logo Image.
Note: The Logo Image is read from the Images folder within the Project directory (discussed earlier).
 
After setting the resolution, the Coordinates for drawing the Logo Image in the center of the QRCode are calculated and the Logo Image is drawn in the center of the QRCode Bitmap.
Finally, the Bitmap is saved to the MemoryStream and converted into BASE64 string which is later set to the ViewBag object and the page is redirected to Index View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult Generate(string qrcode)
    {
        //Generate QRCode object.
        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCode qrCode = new QRCode(qrGenerator.CreateQrCode(qrcode, QRCodeGenerator.ECCLevel.Q));
 
        //Create a Bitmap using the QRCode.
        using (Bitmap bmpQRCode = qrCode.GetGraphic(30))
        {
            //Read the Logo Image.
            using (Bitmap bmpLogo = new Bitmap(Server.MapPath("~/images/ASPSnippets.png")))
            {
                //Set the Resolution.
                bmpLogo.SetResolution(80f, 80f);
 
                //Calculating the coordinates for the Logo Image.
                int x = (bmpQRCode.Height - bmpLogo.Height) / 2;
                int y = (bmpQRCode.Width - bmpLogo.Width) / 2;
                Point p = new Point(x, y);
 
                //Drawing the Logo Image in the center of the QRCode.
                Graphics graphics = Graphics.FromImage(bmpQRCode);
                graphics.DrawImage(bmpLogo, p);
            }
 
            using (MemoryStream ms = new MemoryStream())
            {
                //Saving the QRCode Bitmap to MemoryStream.
                bmpQRCode.Save(ms, ImageFormat.Png);
 
                //Displaying the QRCode Image using BASE64 string.
                ViewBag.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
            }
        }
        return View("Index");
    }
}
 
 

View

HTML Markup

The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is generate.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML INPUT TextBox, a Submit Button and an Image element.
 

Submitting the Form

When the Submit Button is clicked, the ViewBag object is checked for NULL and if it is not NULL then the value of the object is set into the src property of the Image element and the generated QRCode Image is displayed.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Generate", "Home", FormMethod.Post))
    {
        <input type="text" name="qrcode" />
        <input type="submit" value="Generate" />
    }
    <br />
    @if (ViewBag.QRCodeImage != null)
    {
        <img src="@ViewBag.QRCodeImage" alt="" style="height:150px;width:150px" />
    }
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Generate QRCode with Logo (Image) in Center
 
 

Demo

View Demo
 
 

Downloads

Download Code