Add a Logo

The QRCode allows you an error margin of 30%, when the error correction level is set to H (High). This let's you customize your QRCode by adding images over it, without distorting the scannability of the QRCode. Although, it is advised not to add an image bigger than 1/3rd the size of the QRCode itself.

In Visual Studio, create a new ASP.Net Web Application and add a new Web Form. Then, complete the following steps to add a logo to the QRCode.

In the Designer

Locate the C1QRCode and C1BinaryImage controls in the toolbox and place it onto the Web Form.
If you cannot locate the controls in the toolbox, right click and select Choose items. The Choose Toolbox Items dialog appears. Locate the control and click OK.
Add the ImageURL to the BinaryImage control, to add an image to the control.

Set the controls' properties as shown in the table below:

Control Name	Property	Value
C1QRCode1	Text	QRCode Sample Text
C1QRCode1	ErrorCorrectionLevel	H
C1QRCode1	ForeColor	#CC0000
C1QRCode1	Height, Width	150px
C1BinaryImage1	Height	85px
C1BinaryImage1	Width	100px

In Source View

Following will be your code for the form, in the Source View, after you have added both controls and set all the properties:

Source View	Copy Code
<cc1:C1QRCode id="C1QRCode1" runat="server" Text="QRCode Sample Text" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <cc1:C1BinaryImage id="C1BinaryImage1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />

Source View

Copy Code

<cc1:C1QRCode id="C1QRCode1" runat="server" Text="QRCode Sample Text" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" />
<cc1:C1BinaryImage id="C1BinaryImage1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />

Add the following code within the <head></head> tags, to create CSS classes for the QRCode and the BinaryImage, to make the image overlap the QRCode.

Source View	Copy Code
<style type="text/css"> .qrcodeA1 { position:absolute; top: -1px; left: 4px; z-index: 1; } .imgB1 { position:absolute; top: 35px; left: 25px; z-index: 3; right: 759px; } </style>

Set the CssClass property for both the controls, within their respective tags, as shown below:

Source View	Copy Code
<cc1:C1QRCode id="C1QRCode1" CssClass="qrcodeA1" runat="server" Text="QRCode Sample Text" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <cc1:C1BinaryImage id="C1BinaryImage1" CssClass="imgB1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />

Source View

Copy Code

<cc1:C1QRCode id="C1QRCode1" CssClass="qrcodeA1" runat="server" Text="QRCode Sample Text" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" />
<cc1:C1BinaryImage id="C1BinaryImage1" CssClass="imgB1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />

What You've Accomplished

When you run the project, a customized QRCode is generated, with a logo added over it, as shown in the image below: