Creating QR codes using Google's Web API

Google Charts can be queried via POST (see here for details: https://developers.google.com/chart/image/docs/post_requests?csw=1), so we have to: a) query the remote server, specifically the POST parameters (described later), b) get the server's response (a PNG image), c) use it for us, that is, draw it (the image) how we want.

So, open a project in Visual Studio and add a new User Control. Set the BorderStyle property to Fixed3D and DoubleBuffered to True (to avoid flickering when the control refreshes itself).

Using the Code

The standard URL we will query is as follows: http://chart.googleapis.com/chart?chs={WIDTH}x{HEIGHT}&cht=qr&chl={DATA} (the parameters in curly brackets will be replaced by the actual parameters). chs is determined by the specific QR code (width x height) and chl contains the data represented by the barcode. The parameters related to the size of the barcode are easy to derive from the properties of our control (the standard control naturally has width and height), but we also need to create a new variable to store a fixed-length text, which represents the data displayed by our QR code.

In the UserControl, we define the standard URI as a constant, define the Data Property, and an internal variable to store the local context data:

 Const _GOOGLE_URL As String = "http://chart.googleapis.com/chart?chs= [This link is external to TechNet Wiki. It will open in a new window.] {WIDTH}x{HEIGHT}&cht=qr&chl={DATA}"  
 Dim_DATA As String = String.Empty 
   
 Property Data As String
 Get
 Return _DATA
 End Get
 Set(value As String)
 _DATA = value
 End Set
 End Property

When we use Control, Data Property is available in both code view and design view:

Now we can construct a URL URI with the request parameters, which requires assembling the data by encoding it before the page request. We need to make sure that there are no special characters that will interfere with our query. I wrote a private method to do this. Calling it can get a parameter-encoded URI (thanks to the WebUtility.UrlEncode function).

 Private Function getQRURI() As String
    Dim _qrAddr As String = _GOOGLE_URL.Replace( "{WIDTH}" , Me.Width.ToString).Replace( "{HEIGHT}" , Me.Height.ToString)
    _qrAddr = _qrAddr.Replace( "{DATA}" , WebUtility.UrlEncode(_DATA)) 
   
 Return _qrAddr
 End Function

Once the data parameters need to be included, we will replace the two parameters {WIDTH} and {HEIGHT} in the code with our size (for WebUtility.UrlEncode, see here.

<

Now you can get the QR code image from the remote server, because we have used the QRCode control to generate a QR code image cache on the server waiting for your request. Since I want to use the standard OnPaint drawing method directly (which can better use PaintEventArgs), I will overload it and add my own code:

 Protected Overrides Sub OnPaint(e As PaintEventArgs)
 MyBase.OnPaint(e)
    If _DATA Is Nothing Then Exit Sub 
   
    Dim client As New WebClient()
    Dim bytes() As Byte = client.DownloadData(getQRURI())
 client.Dispose() 
   
    Dim memStream As New IO.MemoryStream(bytes)
    Dim bmp As Bitmap = Bitmap.FromStream(memStream)
 memStream.Dispose() 
   
    e.Graphics.DrawImage(bmp, 0 , 0 )
 End Sub

Call the standard drawing operation. Next, we check if there is a data request (there is another method), and we use a new WebClient instance to handle the remote request. By calling the download data processed by the format URI method, we fill a bytes array and then build a QR Code image in PNG format.

Variables of type Picture can be initialized by reading from a stream (just like when we open a local picture, there will be a copy of the local stream). Now that we have our bytes in memory, we can declare an array-based MemoryStream and use it as the source of the bitmap. At this point , to achieve a fully working bitmap, we can use the variable e, which the OnPaint event can access itself, to draw the image at the position [0;0] that we control.

After compiling our project, the QRBox will appear in the Toolbox, ready to be used on the Form.

Using it is very simple, you only need to set its data and properties, as well as the callback to control the refresh.

The following simple Form example will show how it works. I have added a QrBox, a standard TextBox and Button to my Form.

When the user presses the "Make" button, we will read the TextBox text, transfer it to the QrBox Data Property, and trigger the refresh method. To start the remote query for Google Charts, the code generated by pressing the button will be as simple as this:

 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    QrBox1.Data = TextBox1.Text
 QrBox1.Refresh()
 End Sub

The complete code of UserControl

The complete code of QrBox UserControl is as follows:

 Imports System.Net 
   
 Public Class QRBox
    Const _GOOGLE_URL As String = "http://chart.googleapis.com/chart?chs={WIDTH}x{HEIGHT}&cht=qr&chl={DATA}"  
    Dim_DATA As String = String.Empty 
   
 Property Data As String
 Get
 Return _DATA
 End Get
 Set(value As String)
 _DATA = value
 End Set
 End Property 
   
    Private Function getQRURI() As String
        Dim _qrAddr As String = _GOOGLE_URL.Replace( "{WIDTH}" , Me.Width.ToString).Replace( "{HEIGHT}" , Me.Height.ToString)
        _qrAddr = _qrAddr.Replace( "{DATA}" , WebUtility.UrlEncode(_DATA)) 
   
 Return _qrAddr
 End Function 
   
    Protected Overrides Sub OnPaint(e As PaintEventArgs)
 MyBase.OnPaint(e)
        If _DATA Is Nothing Then Exit Sub 
   
        Dim client As New WebClient()
        Dim bytes() As Byte = client.DownloadData(getQRURI())
 client.Dispose() 
   
        Dim memStream As New IO.MemoryStream(bytes)
        Dim bmp As Bitmap = Bitmap.FromStream(memStream)
 memStream.Dispose() 
   
        e.Graphics.DrawImage(bmp, 0 , 0 )
 End Sub 
   
 Public Sub New()
 InitializeComponent()
 End Sub
 End Class