See Also
Other Platforms
Features
Buy Now
Online Help
Demo
Licensing

Back

How to draw and print QR Code barcode on high quality photos or images in ASP.NET

Prerequisites
  • Neodynamic Barcode Professional 7.0 for ASP.NET (WebControl)
  • Microsoft ASP.NET 2.0 or greater
  • Microsoft Visual Studio 2005/2008/2010 or Visual Web Developer
In this guide you will learn how to draw and print QR Code barcodes on high quality photos or images in an ASP.NET website.

NOTE: Although this guide takes QR Code barcode as a sample, you can use ANY of the linear, postal & 2D barcodes supported by Barcode Professional for ASP.NET product. For example, you could change this guide to print Code 39, Code 128, EAN-13, UPC-A, GS1 DataMatrix, GS1-128, GS1 DataBar, Data Matrix, PDF417, etc.

Suppose you have a client which is a professional photographer. He wants you design a website where he can show his work to the world. He also wants to offer to the website visitors to print out a sample photo but with some kind of symbol, watermark or info so his photo or website would be reached by any other person who like it.

QR Code barcodes are commonly used today for tagging things like postcards, business cards, brochures, etc; and any person using a mobile device with a barcode reader software can scan those barcodes for further info. Usually, an URL is encoded into the QR Code so when scanned, the user’s mobile browser is redirected to such location. Other info or formats like VCard, MeCard, SMS, etc. are also used with QR Code barcodes.
In the following sample code, we'll be doing this:
  • Take a high quality JPEG photo (6 x 4 inch size at 300 dpi i.e. 1800 x 1200 px)
  • Use our Barcode Professional for ASP.NET dll for drawing a high quality QR Code encoding the URL of the source photo so users could be redirected to such site after scanning the barcode
  • Correctly display the generated image (i.e. the source photo with the embedded QR Code barcode) on an ASP.NET page so the user can print it to its local printer at high quality resolution.
To reproduce this code, follows these steps:
  • Open Visual Studio 2008/2010 and create a new ASP.NET website.
  • Install Barcode Professional for ASP.NET in your machine and add a reference to Neodynamic.WebControls.BarcodeProfessional.dll in this ASP.NET project
  • Create a new folder under the root called "images" and place inside it the sample high quality photo called Macaws.jpg

    NOTE: this photo is courtesy of Stockvault.net and is available at http://www.stockvault.net/photo/113075/macaws. This is used here for demonstration purpose ONLY. Please read the Term of Use at http://www.stockvault.net/terms-of-use

  • Add a new item of type "Generic Handler" and name it GenHQBarcode.ashx
  • On this file, we'll take the Macaws.jpg high quality photo using System.Drawing.Image class and after creating a System.Drawing.Graphics object, we’ll draw a QR Code barcode onto it encoding the URL which references the source image on the web. The output image (i.e. the photo with the QR Code stamped onto it) will be saved as a new JPEG image with a 90% quality compression level. Please copy/paste the following code:


  • Visual Basic .NET

    Imports System.Web
    
    Imports Neodynamic.WebControls.BarcodeProfessional
    
    Public Class GenHQBarcode
    	Implements IHttpHandler
    
    	Public Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest
    
    		Dim buffer As Byte() = Nothing
    		'get the HQ image or photo for drawing the barcode onto it
    		Using myImage As System.Drawing.Image = System.Drawing.Image.FromFile(context.Server.MapPath("~/images/macaws.jpg"))
    			'create a Graphics object on the image for drawing barcode
    			Using gfx As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(myImage)
    				'create a BarcodeProfessional object and draw a QR Code barcode on the image
    				Using bcp As New BarcodeProfessional()
    					'barcode unit is in inch (change it if needed)
    					bcp.BarcodeUnit = BarcodeUnit.Inch
    					'Set the barcode to QR Code standard
    					bcp.Symbology = Symbology.QRCode
    					'Set the QR Code module size (each small black square is a module)
    					bcp.QRCodeModuleSize = 0.0208
    					'set the value to encode per your needs... 
    					'in this case the URL of the original photo
    					bcp.Code = "http://www.stockvault.net/photo/113075/macaws"
    					'set a Quiet zone for the barcode
    					bcp.QuietZoneWidth = 0.1
    					bcp.BottomPadding = 0.1
    					bcp.TopPadding = 0.1
    					'use a semi-transparent white background
    					'so the QR Code looks like a watermark
    					bcp.BackColor = System.Drawing.Color.FromArgb(128, 255, 255, 255)
    					'draw the QR Code barcode onto the image at x=0.5in & y=0.5in!!!
    					bcp.DrawOnCanvas(gfx, New System.Drawing.PointF(0.5F, 0.5F))
    				End Using
    			End Using
    
    			'save the output image to a memory stream
    			Using ms As New System.IO.MemoryStream()
    				' Get an ImageCodecInfo object that represents the JPEG codec.
    				Dim myImageCodecInfo As System.Drawing.Imaging.ImageCodecInfo = GetEncoderInfo("image/jpeg")
    
    				' Create an Encoder object based on the GUID
    
    				' for the Quality parameter category.
    				Dim myEncoder As System.Drawing.Imaging.Encoder = System.Drawing.Imaging.Encoder.Quality
    
    				' Create an EncoderParameters object.
    				' An EncoderParameters object has an array of EncoderParameter objects. In this case, there is only one
    				' EncoderParameter object in the array.
    				Dim myEncoderParameters As New System.Drawing.Imaging.EncoderParameters(1)
    
    				' Save the bitmap as a JPEG file with quality level 90
    				Dim myEncoderParameter As New System.Drawing.Imaging.EncoderParameter(myEncoder, 90L)
    				myEncoderParameters.Param(0) = myEncoderParameter
    
    				'save as jpeg 
    				myImage.Save(ms, myImageCodecInfo, myEncoderParameters)
    				'save to buffer
    				buffer = ms.ToArray()
    			End Using
    		End Using
    
    		'render the HQ photo + barcode back to the browser
    		context.Response.ContentType = "image/jpeg"
    		context.Response.BinaryWrite(buffer)
    	End Sub
    
    	Private Shared Function GetEncoderInfo(mimeType As String) As System.Drawing.Imaging.ImageCodecInfo
    		Dim j As Integer
    		Dim encoders As System.Drawing.Imaging.ImageCodecInfo()
    		encoders = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()
    		For j = 0 To encoders.Length - 1
    			If encoders(j).MimeType = mimeType Then
    				Return encoders(j)
    			End If
    		Next
    		Return Nothing
    	End Function
    
    	Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    		Get
    			Return False
    		End Get
    	End Property
    
    End Class
    													


    C#

    using System;
    using System.Web;
    
    using Neodynamic.WebControls.BarcodeProfessional;
    
    public class GenHQBarcode : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
    
            byte[] buffer = null;
            //get the HQ image or photo for drawing the barcode onto it
            using (System.Drawing.Image myImage = System.Drawing.Image.FromFile(context.Server.MapPath("~/images/macaws.jpg")))
            { 
                //create a Graphics object on the image for drawing barcode
                using (System.Drawing.Graphics gfx = System.Drawing.Graphics.FromImage(myImage))
                { 
                    //create a BarcodeProfessional object and draw a QR Code barcode on the image
                    using (BarcodeProfessional bcp = new BarcodeProfessional())
                    {
                        //barcode unit is in inch (change it if needed)
                        bcp.BarcodeUnit = BarcodeUnit.Inch;
                        //Set the barcode to QR Code standard
                        bcp.Symbology = Symbology.QRCode;
                        //Set the QR Code module size (each small black square is a module)
                        bcp.QRCodeModuleSize = 0.0208;
                        //set the value to encode per your needs... 
                        //in this case the URL of the original photo
                        bcp.Code = "http://www.stockvault.net/photo/113075/macaws"; 
                        //set a Quiet zone for the barcode
                        bcp.QuietZoneWidth = 0.1;
                        bcp.BottomPadding = 0.1;
                        bcp.TopPadding = 0.1;
                        //use a semi-transparent white background
                        //so the QR Code looks like a watermark
                        bcp.BackColor = System.Drawing.Color.FromArgb(128, 255, 255, 255);                    
                        //draw the QR Code barcode onto the image at x=0.5in & y=0.5in!!!
                        bcp.DrawOnCanvas(gfx, new System.Drawing.PointF(0.5f, 0.5f));
                    }
                }        
            
                //save the output image to a memory stream
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
                {
                    // Get an ImageCodecInfo object that represents the JPEG codec.
                    System.Drawing.Imaging.ImageCodecInfo myImageCodecInfo = GetEncoderInfo("image/jpeg");
                    
                    // Create an Encoder object based on the GUID
    
                    // for the Quality parameter category.
                    System.Drawing.Imaging.Encoder myEncoder = System.Drawing.Imaging.Encoder.Quality;
    
                    // Create an EncoderParameters object.
                    // An EncoderParameters object has an array of EncoderParameter objects. In this case, there is only one
                    // EncoderParameter object in the array.
                    System.Drawing.Imaging.EncoderParameters myEncoderParameters = new System.Drawing.Imaging.EncoderParameters(1);
    
                    // Save the bitmap as a JPEG file with quality level 90
                    System.Drawing.Imaging.EncoderParameter myEncoderParameter = new System.Drawing.Imaging.EncoderParameter(myEncoder, 90L);
                    myEncoderParameters.Param[0] = myEncoderParameter;
                                    
                    //save as jpeg 
                    myImage.Save(ms, myImageCodecInfo, myEncoderParameters);
                    //save to buffer
                    buffer = ms.ToArray();
                }
            }        
            
            //render the HQ photo + barcode back to the browser
            context.Response.ContentType = "image/jpeg";
            context.Response.BinaryWrite(buffer);
        }
    
        private static System.Drawing.Imaging.ImageCodecInfo GetEncoderInfo(string mimeType)
        {
            int j;
            System.Drawing.Imaging.ImageCodecInfo[] encoders;
            encoders = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
            for (j = 0; j < encoders.Length; ++j)
            {
                if (encoders[j].MimeType == mimeType)
                    return encoders[j];
            }
            return null;
        }
        
        public bool IsReusable {
            get {
                return false;
            }
        }
    
    }
    
  • The above HTTP Handler generates the output high quality image when invoking it. Remember that the original photo and the generated by that handler is 1800 x 1200 px at 300 dpi. To correctly display it on a webpage and still print it at high resolution on the user’s local printer, the image must be set up on a simple IMG HTML tag but scale down its size to 96 dpi (which is the most common resolution on screen). So at 96 dpi, that image must be forced to be displayed with this size: 576px (6in * 96) width x 384px (4in * 96) height. In this way, the image will be displayed with a correct size for screen and when printing from the browser, the source image size (1800x1200) and dpi (300) will be taken into account getting high quality printing output.



  • That's it. Open the default.aspx page in your favorite browser and you should get something like follows:


    The high quality photo with a dynamically generated QR Code from ASP.NET


    Here are the source and the generated photo with the QR Code dynamically generated by Neodynamic Barcode Professional for ASP.NET product.

    Here are the source and the generated photo with the QR Code dynamically generated by Neodynamic Barcode Professional for ASP.NET product.


    The source Macaws.jpg photo from http://www.stockvault.net/photo/113075/macaws

    The output image with a QR Code on it featuring a semitransparent white background


    The output image with a QR Code on it featuring a semitransparent white background
If you need more information or assistance, please contact our .
 Copyright © 2003 - 2012 Neodynamic S.R.L. All rights reserved.