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

Installing QRCoder package and System.Drawing.Common using Nuget

In order to install QRCoder library using Nuget, please refer my article Install QRCoder library using Nuget.
And for installing System.Drawing.Common package, please refer my article Install System.Drawing.Common from Nuget.
 
 

Logo Location

The Logo image is saved in the Folder (Directory) named images of wwwroot Folder (Directory).
ASP.Net Core Razor Pages: Generate QRCode with Logo (Image) in Center
 
 

Namespaces

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

Razor PageModel (Code-Behind)

First, a private property of IWebHostEnvironment interface is created and the IWebHostEnvironment interface is passed as parameter to Constructor of HomeController.
Inside the Constructor, the private property is set with the instance of the IWebHostEnvironment accepted as parameter.
The PageModel consists of following Handler methods.

Handler method for handling GET operation

This Handler method left empty as it is not required.
 

Handler method for handling POST operation

This Handler method accepts the TextBox value as a parameter.
Inside this Handler 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) using IWebHostEnvironment interface.
          The IWebHostEnvironment interface is injected using Dependency Injection inside the IndexModel class, for more details please refer Using IWebHostEnvironment in ASP.Net Core.
          For more details on how to access Static Files in Core, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
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 ViewData object and the page is redirected to Index View.
public class IndexModel : PageModel
{
    private IWebHostEnvironment Environment { get; set; }
 
    public IndexModel(IWebHostEnvironment environment)
    {
        this.Environment = environment;
    }
 
    public string QRCodeImage { get; set; }
 
    public void OnGet()
    {
    }
 
    public void OnPostGenerate(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))
        {
            //Fetch file name of the Logo Image.
            string fileName = Path.Combine(this.Environment.WebRootPath, "images\\ASPSnippets.png");
 
            //Read the Logo Image.
            using (Bitmap bmpLogo = new Bitmap(fileName))
            {
                //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.
                this.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
            }
        }
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The Razor Page consists of an HTML Form which has been created using the following TagHelpers attribute.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Razor Page consists of an HTML INPUT TextBox, a Submit Button and an Image element.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostGenerate but here it will be specified as Generate when calling from the Razor HTML Page.
 

Submitting the Form

When the Submit Button is clicked, the ViewData 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.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model QRCode_Logo_Centre_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <input type="text" name="qrcode" />
        <input type="submit" value="Generate" asp-page-handler="Generate" />
    </form>
    <br />
    @if (Model.QRCodeImage != null)
    {
        <img src="@Model.QRCodeImage" alt="" style="height:150px;width:150px" />
    }
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Generate QRCode with Logo (Image) in Center
 
 

Demo

View Demo
 
 

Downloads

Download Code