User Scenarios > 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.
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. |
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 |
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" /> |
<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> |
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" /> |
When you run the project, a customized QRCode is generated, with a logo added over it, as shown in the image below: