ComponentOne QRCode for ASP.NET Web Forms
User Scenarios / Add a Logo
In This Topic
    Add a Logo
    In This Topic

    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

    1. 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.
    2. Add the ImageURL to the BinaryImage control, to add an image to the control.
    3. 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

    1. 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" />

    2. 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>

    3. 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" />

    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: