using IronBarCode; using System.Drawing; // Creating a barcode is as simple as: var myBarcode = BarcodeWriter.CreateBarcode("12345", BarcodeWriterEncoding.EAN8); // And save our barcode as in image: myBarcode.SaveAsImage("EAN8.jpeg"); Image myBarcodeImage = myBarcode.Image; // Can be used as Image Bitmap myBarcodeBitmap = myBarcode.ToBitmap(); // Can be used as Bitmap // Reading a barcode is easy with IronBarcode: var resultFromFile = BarcodeReader.Read(@"file/barcode.png"); // From a file var resultFromBitMap = BarcodeReader.Read(new Bitmap("barcode.bmp")); // From a bitmap var resultFromImage = BarcodeReader.Read(Image.FromFile("barcode.jpg")); // From an image var resultFromPdf = BarcodeReader.ReadPdf(@"file/mydocument.pdf"); // From PDF use ReadPdf // After creating a barcode, we may choose to resize and save which is easily done with: var myNewBarcode = BarcodeWriter.CreateBarcode("12345", BarcodeWriterEncoding.EAN8); myNewBarcode.ResizeTo(400, 100); myNewBarcode.SaveAsImage("myBarcodeResized.jpeg"); // To set more options and optimization with your Barcode Reading, // Please utilize the BarcodeReaderOptions paramter of read: var myOptionsExample = new BarcodeReaderOptions { // Choose a speed from: Faster, Balanced, Detailed, ExtremeDetail // There is a tradeoff in performance as more Detail is set Speed = ReadingSpeed.Balanced, // Reader will stop scanning once a barcode is found, unless set to true ExpectMultipleBarcodes = true, // By default, all barcode formats are scanned for. // Specifying one or more, performance will increase. ExpectBarcodeTypes = BarcodeEncoding.AllOneDimensional, // Utilizes multiple threads to reads barcodes from multiple images in parallel. Multithreaded = true, // Maximum threads for parallel. Default is 4 MaxParallelThreads = 2, // The area of each image frame in which to scan for barcodes. // Will improve performance significantly and avoid unwanted results and avoid noisy parts of the image. CropArea = new Rectangle(), // Special Setting for Code39 Barcodes. // If a Code39 barcode is detected. Try to use extended mode for the full ASCII Character Set UseCode39ExtendedMode = true }; // And, apply: var results = BarcodeReader.Read("barcode.png", myOptionsExample);

using IronBarCode; using System.Drawing; /*** CREATING BARCODE IMAGES ***/ // Shorthand:: Create and save a barcode in a single line of code BarcodeWriter.CreateBarcode("12345", BarcodeWriterEncoding.EAN8).ResizeTo(400, 100).SaveAsImage("EAN8.jpeg"); /***** IN-DEPTH BARCODE CREATION OPTIONS *****/ // BarcodeWriter.CreateBarcode creates a GeneratedBarcode which can be styles and exported as an Image object or File GeneratedBarcode MyBarCode = BarcodeWriter.CreateBarcode("Any Number, String or Binary Value", BarcodeWriterEncoding.Code128); // Style the Barcode in a fluent LINQ style fashion MyBarCode.ResizeTo(300, 150).SetMargins(20).AddAnnotationTextAboveBarcode("Example EAN8 Barcode").AddBarcodeValueTextBelowBarcode(); MyBarCode.ChangeBackgroundColor(Color.LightGoldenrodYellow); // Save MyBarCode as an image file MyBarCode.SaveAsImage("MyBarCode.png"); MyBarCode.SaveAsGif("MyBarCode.gif"); MyBarCode.SaveAsHtmlFile("MyBarCode.html"); MyBarCode.SaveAsJpeg("MyBarCode.jpg"); MyBarCode.SaveAsPdf("MyBarCode.Pdf"); MyBarCode.SaveAsPng("MyBarCode.png"); MyBarCode.SaveAsTiff("MyBarCode.tiff"); MyBarCode.SaveAsWindowsBitmap("MyBarCode.bmp"); // Save MyBarCode as a .NET native objects Image MyBarCodeImage = MyBarCode.Image; Bitmap MyBarCodeBitmap = MyBarCode.ToBitmap(); byte[] PngBytes = MyBarCode.ToPngBinaryData(); using (System.IO.Stream PdfStream = MyBarCode.ToPdfStream()) { // Stream barcode image output also works for GIF,JPEG, PDF, PNG, BMP and TIFF } // Save MyBarCode as HTML files and tags MyBarCode.SaveAsHtmlFile("MyBarCode.Html"); string ImgTagForHTML = MyBarCode.ToHtmlTag(); string DataURL = MyBarCode.ToDataUrl(); // Save MyBarCode to a new PDF, or stamp it in any position on any page(s) of an existing Document MyBarCode.SaveAsPdf("MyBarCode.Pdf"); MyBarCode.StampToExistingPdfPage("ExistingPDF.pdf", 200, 50, 1); // position 200x50 on page 1 MyBarCode.StampToExistingPdfPages("ExistingPDF.pdf", 200, 50, new[] { 1, 2, 3 }, "Password123"); // multiple pages of an encrypted PDF

using IronBarCode; using System; using System.Drawing; /*** STYLING GENERATED BARCODES ***/ // BarcodeWriter.CreateBarcode creates a GeneratedBarcode object which allows the barcode to be styled and annotated. GeneratedBarcode MyBarCode = BarcodeWriter.CreateBarcode("Iron Software", BarcodeWriterEncoding.QRCode); // Any text (or commonly, the value of the barcode) can be added to the image in a default or specified font. // Text positions are automatically centered, above or below. Fonts that are too large for a given image are automatically scaled down. MyBarCode.AddBarcodeValueTextBelowBarcode(); MyBarCode.AddAnnotationTextAboveBarcode("This is My Barcode", new Font(new FontFamily("Arial"), 12, FontStyle.Regular, GraphicsUnit.Pixel), Color.DarkSlateBlue); // Resize, add Margins and Check final Image Dimensions MyBarCode.ResizeTo(300, 300); // pixels MyBarCode.SetMargins(0, 20, 0, 20); int FinalWidth = MyBarCode.Width; int FinalHeight = MyBarCode.Height; //Recolor the barcode and its background MyBarCode.ChangeBackgroundColor(Color.LightGray); MyBarCode.ChangeBarCodeColor(Color.DarkSlateBlue); if (!MyBarCode.Verify()) { Console.WriteLine("Color contrast should be at least 50% or a barcode may become unreadable. Test using GeneratedBarcode.Verify()"); } // Finally save the result MyBarCode.SaveAsHtmlFile("StyledBarcode.html"); /*** STYLING BARCODES IN A SINGLE LINQ STYLE EXPRESSION ***/ // Fluent API BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeWriterEncoding.Aztec).ResizeTo(250, 250).SetMargins(10).AddBarcodeValueTextAboveBarcode().SaveAsImage("StyledBarcode.png"); /*** STYLING QR CODES WITH LOGO IMAGES OR BRANDING ***/ // Use the QRCodeWriter.CreateQrCodeWithLogo Method instead of BarcodeWriter.CreateBarcode // Logo will automatically be sized appropriately and snapped to the QR grid. var qrCodeLogo = new QRCodeLogo("ironsoftware_logo.png"); GeneratedBarcode myQRCodeWithLogo = QRCodeWriter.CreateQrCodeWithLogo("https://ironsoftware.com/", qrCodeLogo); myQRCodeWithLogo.ResizeTo(500, 500).SetMargins(10).ChangeBarCodeColor(Color.DarkGreen); myQRCodeWithLogo.ResizeTo(500, 500).SetMargins(10).ChangeBarCodeColor(Color.DarkGreen); myQRCodeWithLogo.SaveAsPng("QRWithLogo.Png").SaveAsPdf("MyVerifiedQR.html"); // save as 2 formats

Published August 30, 2023

How to Integrate Barcode Scanner into Web Application

In today's digital age, the seamless convergence of physical and virtual worlds has become increasingly important for optimizing various processes. One example of such integration that exemplifies this trend is the incorporation of a barcode scanner into web applications. By bridging the gap between tangible products and online functionalities, businesses and individuals alike can unlock a realm of possibilities, from effortless inventory management and enhanced user experiences to streamlined data entry, efficient tracking systems, and scanning QR codes. This integration not only enhances the overall functionality of online applications but also paves the way for a more interconnected and efficient digital ecosystem.

In this article, we will use IronBarcode to add a barcode scanner to a web application. With the addition of a barcode scanner into a web-based application, images could be scanned and uploaded from any camera-equipped device, maximizing the mobility of the digital ecosystem.

How to Integrate Barcode Scanner into a Web Application

Download The C# IronBarcode Library.
Create a new ASP.NET web application project in Visual Studio.
Design the Front-End using HTML5 and CSS.
Write backend methods that will take the uploaded QR Code and convert it into text.
Display the result using a Label.

IronBarcode

IronBarcode stands as a powerful solution at the intersection of technology and convenience, offering developers a robust toolkit to smoothly integrate barcode scanning and generation into their applications. With its comprehensive features and intuitive design, IronBarcode empowers businesses and programmers to effortlessly decode, encode, and manipulate bar codes within their software environments. Whether it be aiming to optimize inventory management, facilitate data exchange, or enhance user experiences, IronBarcode opens up a realm of possibilities, simplifying the complex world of barcode processing and enabling applications to interact with the physical world in a digital manner using the browser. IronBarcode supports all the Barcode formats and Barcode Symbologies.

Creating a Barcode Scanning Web Application

In this section, we will demonstrate how to use IronBarcode to build a web application that will scan barcodes and display Results.

Start by creating a new ASP.NET web application project in Visual Studio as shown in the images below.
Install IronBarcode using the NuGet Package Manager Console.
To do so, open the NuGet Package Manager Console and run the following Command, it will install IronBarcode within just a few seconds.
```
Install-Package BarCode
```
You can also download the package directly from the NuGet website.

Once the Installation is complete Open the Default.aspx file and replace it with your frontend code. This will create a file upload button, a button with text 'Scan Barcode', and a label to show the results.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <div><br /><br /><br />
        <asp:FileUpload ID="fileUpload" runat="server" />
            <br />
            <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
            <br />
            <asp:Label ID="lblResult" runat="server"></asp:Label>
        </div>
</asp:Content>

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <div><br /><br /><br />
        <asp:FileUpload ID="fileUpload" runat="server" />
            <br />
            <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
            <br />
            <asp:Label ID="lblResult" runat="server"></asp:Label>
        </div>
</asp:Content>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" @Inherits="WebApplication6._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div><br /><br /><br /> <asp:FileUpload ID="fileUpload" runat="server" /> <br /> <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" /> <br /> <asp:Label ID="lblResult" runat="server"></asp:Label> </div> </asp:Content>

VB C#

Now we will write the backend code that will take an uploaded image and scan it for a QR code or Barcode and display the results.

Open the Default.aspx.cs file replace the code present with the code below.

using IronBarCode;
using System;
using System.IO;

public partial class _Default : System.Web.UI.Page
{    
    protected void btnScan_Click(object sender, EventArgs e)
    {
        try
        {
            if (fileUpload.HasFile)
            {
                Stream stream = fileUpload.PostedFile.InputStream;
                var barcodeResults = BarcodeReader.Read(stream);

                lblResult.Text = "Scanned Barcode: " + barcodeResults;
            }
            else
            {
                lblResult.Text = "Please upload an image.";
            }
        }
        catch (Exception ex)
        {
            lblResult.Text = "Error: " + ex.Message;
        }
    }
}

using IronBarCode;
using System;
using System.IO;

public partial class _Default : System.Web.UI.Page
{    
    protected void btnScan_Click(object sender, EventArgs e)
    {
        try
        {
            if (fileUpload.HasFile)
            {
                Stream stream = fileUpload.PostedFile.InputStream;
                var barcodeResults = BarcodeReader.Read(stream);

                lblResult.Text = "Scanned Barcode: " + barcodeResults;
            }
            else
            {
                lblResult.Text = "Please upload an image.";
            }
        }
        catch (Exception ex)
        {
            lblResult.Text = "Error: " + ex.Message;
        }
    }
}

Imports IronBarCode
Imports System
Imports System.IO

Partial Public Class _Default
	Inherits System.Web.UI.Page

	Protected Sub btnScan_Click(ByVal sender As Object, ByVal e As EventArgs)
		Try
			If fileUpload.HasFile Then
				Dim stream As Stream = fileUpload.PostedFile.InputStream
				Dim barcodeResults = BarcodeReader.Read(stream)

				lblResult.Text = "Scanned Barcode: " & barcodeResults
			Else
				lblResult.Text = "Please upload an image."
			End If
		Catch ex As Exception
			lblResult.Text = "Error: " & ex.Message
		End Try
	End Sub
End Class

VB C#

Now our project is complete, we can run it and open a web page at the following URL "https://localhost:44335/Default".
Click on the Choose File button and upload the image containing the QR code.
At the End Click on the Scan Barcode Button it will display the output below the button.

How to Integrate Barcode Scanner into Web Application: Figure 5

Above are all the steps for creating a web page that has Barcode scanning capabilities now you will be able to read barcodes online, and it is easily integrated with your web applications using IronBarcode.

Conclusion

Incorporating a barcode scanner into web applications through tools and solutions like IronBarcode represents a transformative convergence of physical and digital realms, facilitating seamless interactions between tangible products and online functionalities. This integration empowers businesses and individuals to enhance processes, from streamlined inventory management to efficient data entry, while also simplifying complex barcode processing, thereby fostering a more interconnected and optimized digital ecosystem. The step-by-step guide provided here offers a comprehensive blueprint for effortlessly adding barcode scanning capabilities into web applications, demonstrating the potential of technology to revolutionize user experiences and redefine the boundaries between the virtual and physical worlds.

For a detailed tutorial on how to read barcodes with code examples using IronBarcode Visit here. To know how you can use IronBarcode with Blazor Application Visit this link.