How to display barcode images on HTML pages with DPI support with Barcode Professional for ASP.NET

Product Barcode Professional for ASP.NET Published 11/01/2006 Updated 11/01/2006

Requirements

  Neodynamic Barcode Professional 3.0 for ASP.NET (WebControl)
  Microsoft .NET Framework (any version)
  Microsoft Visual Studio .NET (any version)

Generating high quality barcode images is great for printing scenarios. One problem here however, is that the output barcode image size is directly proportional to the number of pixels in the image (DPI); i.e. the more pixel resolution (DPI), the greater the file size.
For example, if you try to display an image at 600 DPI on a HTML page, then you'll see that the image will appear huge on the client's browser. That's because most display screen resolution works at 96 DPI.

The following guide provides you with a possible solution to this issue. The idea behind it is to generate the barcode at 600 DPI in the server side by using Barcode Professional for ASP.NET while displaying it at 96 DPI on an HTML page by writing some JavaScript code.

NOTE: In this guide we used Visual Studio 2005 (Visual Web Developer) but any VS .NET version can be used as well.

Follow these steps:

  • Create an ASP.NET Web Site project using Visual Studio 2005
  • Delete any ASPX file created in the project
  • Create a BIN folder if needed and add a reference to the Barcode Professional for ASP.NET assembly (Neodynamic.WebControls.BarcodeProfessional.dll)
  • Add a new item of type Generic Handler (a file which extension is ASHX) and name it BarcodeGen.ashx
  • After that, write the following code in the ProcessRequest method in the BarcodeGen.ashx file. In this method will expect to receive (through the Query String) the value to be encoded in Code 128 Symbology and the image resolution (DPI) for generating the output barcode image by using an instance of Barcode Professional.

    VB

    
Dim dpi As Single = 96.0

Try
	dpi = Single.Parse(context.Request.QueryString("dpi"))
Catch
        
End Try
        
Dim valueToEncode As String = context.Request.QueryString("valueToEncode")

Dim bcp As New Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional()
bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128
bcp.Code = valueToEncode

bcp.BarWidth = 0.01F
bcp.BarHeight = 0.5F

context.Response.ContentType = "image/jpeg"
context.Response.BinaryWrite(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Jpeg, dpi))

    C#

    
float dpi = 96.0f;

try
{
    dpi = float.Parse(context.Request.QueryString["dpi"]);
}
catch
{ }

string valueToEncode = context.Request.QueryString["valueToEncode"];

Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional bcp = new Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional();
bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128;
bcp.Code = valueToEncode;

bcp.BarWidth = 0.01f;
bcp.BarHeight = 0.5f;

context.Response.ContentType = "image/jpeg";
context.Response.BinaryWrite(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Jpeg, dpi));
  • Then, add a new item to the project of type HTML Page. This simple HTML will display the barcode image generated (at 600 DPI) by the previous HTTP handler at 96 DPI on the client's browser by using JavaScript code. Write the following HTML code: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>HTML Barcode image with DPI support</title>
    <script type="text/javascript">        
        var imageUrlGen = "BarcodeGen.ashx";
	var imageID = "MyBarcodeImage";
	var txtValueToEncodeID = "MyValueToEncode";		
	var tmpImage;
	var dpi = 600;
	
	function CheckForLoadedImage()
	{
	    if(tmpImage.complete)
	    {
		var img = document.getElementById(imageID);				
		img.width = tmpImage.width * 96 / dpi;
		img.height = tmpImage.height * 96 / dpi;										
		img.src = tmpImage.src;				
		clearTimeout("CheckForLoadedImage()");
	    }
		else
	    {
		setTimeout("CheckForLoadedImage()", 500);
	    }		
	}
 
	function GetBarcodeImage()
	{
	    var valueToEncode = document.getElementById(txtValueToEncodeID).value;		
	    tmpImage = new Image();
	    tmpImage.src = imageUrlGen + "?valueToEncode="  + valueToEncode + "&dpi=" + dpi;			
	    CheckForLoadedImage();
	}   
    </script>
</head>
<body>
    <p>
        <b>Barcode Professional in a HTML page with DPI support</b>
    </p>
    <p>
        <img id="MyBarcodeImage" alt="" src="" />
    </p>
    <p>
        Enter a value to encode:<br />
        <input id="MyValueToEncode" type="text" name="MyValueToEncode" />
    </p>
    <p>
        <input id="Button1" type="button" value="Get Barcode at 600 DPI..."
            name="Button1" onclick="GetBarcodeImage()" />
    </p>
</body>
</html>
  • That's it. Test the HTML page and see what happens. Keep in mind that although the image is resized by using JavaScript code, the generated image's quality is maintained with great printing results.


Useful? Share it!

Need help? Contact Support

We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.