In this article I will explain with an example, how to read QRCode Image in ASP.Net MVC.
This article will make use of ZXing.Net library for reading QR code image.
Download QR Code package
You will need to install the ZXing.Net package using the following command.
Install-Package ZXing.Net -Version 0.16.9
For more details and documentation on ZXing.Net library, please refer following link.
Namespaces
You will need to import the following namespaces.
using System.IO;
using System.Drawing;
using ZXing;
using ZXing.Common;
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside the Action method, simply the View is returned.
Action method for handling POST operation
This Action method gets called, when a File is selected and the Read Button is clicked.
Inside this Action method, the selected file is received in the HttpPostedFileBase as parameter.
Then, the Image file is read into a Byte Array using ReadAllBytes method of the BinaryReader class object.
Then, Byte Array is saved in the MemoryStream object and Bitmap object is created and MemoryStream object is saved to it.
Next, Bitmap is saved in the BitmapLuminanceSource object and then, the source is converted to BinaryBitmap object.
Finally, the decoded value of QR code image is read using the
MultiFormatReader class and set to the
ViewBag object.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(HttpPostedFileBase postedFile)
{
using (BinaryReader br = new BinaryReader(postedFile.InputStream))
{
byte[] bytes = br.ReadBytes(postedFile.ContentLength);
using (MemoryStream ms = new MemoryStream(bytes))
{
// Create Bitmap from selected file.
using (Bitmap bitMap = new Bitmap(ms))
{
// Read the QRCode.
BitmapLuminanceSource source = new BitmapLuminanceSource(bitMap);
BinaryBitmap binaryBitmap = new BinaryBitmap(new HybridBinarizer(source));
// Reader object accept BinaryBitmap and decode it.
Result result = new MultiFormatReader().decode(binaryBitmap);
ViewBag.QRText = result.Text;
}
}
}
return View();
}
}
View
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 Index.
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 HTML Form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation.
Inside the HTML Form there is an HTML FileUpload, a Button and a Span element.
Form Submitting
When the
Read Button is clicked, the form is submitted to the Controllers Action Method and the
ViewBag object is displayed using Razor syntax.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="postedFile" />
<input type="submit" id="btnRead" value="Read" />
<br/><br/>
if (ViewBag.QRText != null)
{
<span>@ViewBag.QRText</span>
}
}
</body>
</html>
Screenshot
Downloads