Adding logo image from asp:Image control to a QR code image

Question

Adding logo image from asp:Image control to a QR code image

Donald Symmons 3,096

I have this C# that generates QR code image, but I want to be able to place a logo in the middle of the QR image. The logo image will be gotten from an image asp:Image control. I search for solutions online but I could only find that they all get their logo from a path (maybe a folder or from fileupload control). But my logo is displayed in an asp image control from database. So I was thinking that if I could get it directly from asp image control and place in the QR code generator it will be great.

From the tutorials I am seeing online, their logo image is uploaded from a file upload control. But my logo image is displayed in the asp Image control.
This is how I see it online.

public byte[] GetQRCodeByte(string url)  
   {  
       string path = "c:\\code\\projects\\CodeCreator\\CodeCreator\\";  
       QRCodeEncoder encoder = new QRCodeEncoder();  
   
       encoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.H; //30%  
       encoder.QRCodeScale = 10;  
   
       Bitmap bmp = encoder.Encode(TextBox1.Text);  
       LogoUpload.SaveAs(path + LogoUpload.FileName);  
   
       System.Drawing.Image logo = System.Drawing.Image.FromFile(path + LogoUpload.FileName);  
   
       int left = (bmp.Width / 2) - (logo.Width / 2);  
       int top = (bmp.Width / 2) - (logo.Width / 2);  
   
       Graphics g = Graphics.FromImage(bmp);  
   
       g.DrawImage(logo, new Point(left, top));  
   
       bmp.Save(path + "img.jpg", ImageFormat.Jpeg);  
   
       Image3.ImageUrl = "img.jpg";  
   }

But I am not using a fileupload control to upload my logo. my logo is displayed from the database table in the asp:Image control (Image1) . I want to add the logo image to the middle of the QR code.

I have a QR code encoder that creates a QR code

public byte[] GetQRCodeBytes(string url)  
{  
    QRCodeEncoder encoder = new QRCodeEncoder();  
    Bitmap bi = encoder.Encode(url);  
    MemoryStream tmpSteam = new MemoryStream();  
    bi.Save(tmpSteam, ImageFormat.Jpeg);  
    return tmpSteam.ToArray();  
}

This code displays my logo image from database

protected void Page_Load(object sender, EventArgs e)  
{  
    showdata1();  
}  
public void showdata1()  
{  
     SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security = True");  
 con.Open();  
 SqlCommand cmd = new SqlCommand();  
 cmd.CommandText = "SELECT * FROM Users WHERE email = '" + Label2.Text + "'";  
 cmd.Connection = con;  
 SqlDataAdapter sda = new SqlDataAdapter();  
 DataSet ds = new DataSet();  
 sda.SelectCommand = cmd;  
 sda.Fill(ds, "detail");  
 if (ds.Tables[0].Rows.Count > 0)  
 {  
 Label2.Text = ds.Tables[0].Rows[0]["email"].ToString();  
 byte[] image = (byte[])ds.Tables[0].Rows[0]["Logo"];  
 Image1.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(image);  
 }  
}

Then when I click on button to create QR code, the QR code will display with the logo image in the center.

protected void Button3_Click(object sender, EventArgs e)  
{  
    // Bind Image3 for QR code  
    byte[] QRBytes = GetQRCodeBytes(ToAbsoluteUrl("/myqrwebpage.aspx"));  
    Image3.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(QRBytes);  
}  
  

public string ToAbsoluteUrl(string relativeUrl)  
   {  
       if (string.IsNullOrEmpty(relativeUrl))  
       {  
           return relativeUrl;  
       }  
       if (relativeUrl.StartsWith("/"))  
       {  
           relativeUrl = relativeUrl.Insert(0, "~");  
       }  
   
       if (!relativeUrl.StartsWith("~/"))  
       {  
           relativeUrl = relativeUrl.Insert(0, "~/");  
       }  
   
       var url = HttpContext.Current.Request.Url;  
       var port = url.Port != 80 ? (":" + url.Port) : String.Empty;  
   
       return String.Format("{0}://{1}{2}{3}", url.Scheme, url.Host, port, VirtualPathUtility.ToAbsolute(relativeUrl));  
   }

I am using MessagingToolKit

namespace

using MessagingToolkit.QRCode.Codec.Data;  
using MessagingToolkit.QRCode.Codec;

Here is my HTML

<div class="col-sm-12">  
            <asp:Label ID="Label2" runat="server" Text="******@gmail.com"></asp:Label>  
            <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">  
                <asp:Image ID="Image1" runat="server" Width="80px" Height="80px" />  
            </div>  
        </div>  
        <br />  
        <div class="col-sm-12">  
            <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">  
                <asp:Image ID="Image3" runat="server" Width="80px" Height="80px" />  
            </div>  
        </div>  
        <br />  
        <div class="col-sm-12">  
            <asp:Button ID="Button3" runat="server" Text="QR Code" OnClick="Button3_Click" />  
        </div>

AgaveJoe 31,341 Reputation points

2022-12-26T16:57:10.157+00:00

So I was thinking that if I could get it directly from asp image control and place in the QR code generator it will be great.

Please see your other post on this subject.

https://learn.microsoft.com/en-us/answers/questions/1142148/how-do-i-insert-image-data-directly-from-an-aspima.html
Viorel 126.9K Reputation points

2022-12-26T20:06:21.407+00:00

I have this C# that generates QR code image, but I want to be able to place a logo in the middle of the QR image.

Will this affect the QR code and make it difficult to decode sometimes?
Donald Symmons 3,096 Reputation points

2022-12-28T05:02:25.32+00:00

Will this affect the QR code and make it difficult to decode sometimes?

I don't want it to be difficult to decode

1 answer

Your answer

AgaveJoe 31,341 Reputation points

2022-12-26T16:57:10.157+00:00

So I was thinking that if I could get it directly from asp image control and place in the QR code generator it will be great.

Please see your other post on this subject.

https://learn.microsoft.com/en-us/answers/questions/1142148/how-do-i-insert-image-data-directly-from-an-aspima.html
Viorel 126.9K Reputation points

2022-12-26T20:06:21.407+00:00

I have this C# that generates QR code image, but I want to be able to place a logo in the middle of the QR image.

Will this affect the QR code and make it difficult to decode sometimes?
Donald Symmons 3,096 Reputation points

2022-12-28T05:02:25.32+00:00

Will this affect the QR code and make it difficult to decode sometimes?

I don't want it to be difficult to decode

Answer 1

QiYou-MSFT 4,341 Microsoft External Staff

Hi @Donald Symmons ,
In fact, I think you don't think the problem is so complicated, since you have a way to upload local files to achieve the function, then we can save the image files in the database to the local first.

string DownLoadFileName;   
public  void DownLoadPicture()    
        {  
            if (DownLoadFileName == "")  
            {  
                MessageBox.Show("Enter a file name");  
                return;  
            }  
            SqlConnection conn = GetConn();  
            string sqlstr = string.Format("your sql command");  
            SqlCommand comm = new SqlCommand(sqlstr, conn);  
                comm.Parameters.AddWithValue("@fileName", this.DownLoadFileName);  
      
                SqlDataReader datereader = comm.ExecuteReader();  
      
                if (datereader.HasRows)  
                {  
                    if (datereader.Read())  
                    {  
                        this.picture = (byte []) dr["Picture"];  
                          
                        FileStream fs = new FileStream(DownLoadFileName, FileMode.Create, FileAccess.Write);  
                        fs.Write(picture, 0, picture.Length);  
                        fs.Close();  
      
                        dr.Close();  
                        conn.Close();                          
                    }  
      
                }//if  
                else  
                {  
                    MessageBox.Show("None");  
                    return;  
                }  
      
            }  
          
        }  
    }

Best Regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,096 Reputation points

2022-12-28T11:24:11.227+00:00

Hi @QiYou-MSFT ,

since you have a way to upload local files to achieve the function, then we can save the image files in the database to the local first.

You misunderstand what I stated. I meant that I already have an existing image which I inserted into the database. The image is displayed in an image control on the web page. I am not uploading image (local files) to achieve the function.
QiYou-MSFT 4,341 Reputation points Microsoft External Staff

2022-12-29T05:56:52.383+00:00

First of all, I understand what you want to do. You want to use the image on the ASP:image control directly as the center logo of the QR code. But at present, this mainstream method has been written as a kind of class. Our image stored in the database is a kind of byte array pattern, and your asp:image display is also achieved by reading the data in the database. And you also mentioned that your online tutorials are also implemented through file uploads, and the reason for this is that this mainstream method is usually similar (ThoughtWorks. QRCode.dll) is a more mainstream approach. If you want to use these ready-made classes, then we need to provide variables based on their variables. This will undoubtedly help us save time. If we follow the previous idea, first read the database files to asp:image through Sqlcommand, then pass them to the backend through the front-end parameters of the ASP.NET, then convert them into Byte arrays, and finally rewrite the methods step by step according to their methods, which will undoubtedly increase a lot of workload, which is what those senior engineers need to consider. So my advice to you is to save the database file locally and finally use the tutorial you found. If you don't have a local file to upload an image as a QR code logo code, I can provide it to you, thank you.
Donald Symmons 3,096 Reputation points

2022-12-30T08:15:38.107+00:00

Hi @QiYou-MSFT ,

So my advice to you is to save the database file locally and finally use the tutorial you found. If you don't have a local file to upload an image as a QR code logo code, I can provide it to you, thank you.

I appreciate the details.

save the database file locally

Do you mean saving in a local database?

If you don't have a local file to upload an image as a QR code logo code, I can provide it to you, thank you.

May I understand what you mean by this?
you don't mean to say that I dont have an image in my machine for testing, do you?
QiYou-MSFT 4,341 Reputation points Microsoft External Staff

2022-12-30T11:59:12.383+00:00

I'm sorry that maybe my description misled you. First, the image displayed by your asp:image is read from the database. All we have to do is save this image locally from the database and use ThoughtWorks. QRCode.dll。 The variable of this method is the local file address. I don't mean that you don't have locally tested images, I mean if you don't have a local file upload as a QR image method, I can provide it to you.
Donald Symmons 3,096 Reputation points

2022-12-31T00:33:57.793+00:00

Okay. I will really appreciate that, with detailed explanations

Share via

Adding logo image from asp:Image control to a QR code image

1 answer

Your answer