Create vCard QR Codes using Azure Functions

by Carlos Mendible on 28 Aug 2016 » Azure, dotNet

Today I’ll show you how to develop a Web API to Create vCard QR Codes using Azure Functions.

But wait what are Azure Functions?

As defined by Microsoft:

Azure Functions is a serverless event driven experience that extends the existing Azure App Service platform. These nano-services can scale based on demand and you pay only for the resources you consume.

And what does serverless means? I really like the definition given by Scot Hanselman in his post What is Serverless Computing? Exploring Azure Functions:

Serverless Computing is like this – Your code, a slider bar, and your credit card. You just have your function out there and it will scale as long as you can pay for it. It’s as close to”cloudy” as The Cloud can get.

Now let’s start:

1. Create a Function App

Head to and hit the New button. Search for Function App and create one. You’ll be asked for an app name, resource group, app service plan and storage account where the code will live.


2. Create the function

Create a new Function, selecting the empty C# template and give it a name: (i.e QRCoder)


3. Add the code

Replace the contents of the Code (run.csx) section with the following code and save it:

#r "System.Drawing"
#r "QRCoder.dll"

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using QRCoder;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
    // Read the json request
    var qrRequest = await req.Content.ReadAsAsync<SimpleVCardRequest>();

    // Create the vCard string
    var vCard = "BEGIN:VCARD\n";
    vCard += $"FN:{qrRequest.Name}\n";
    vCard += $"TEL;WORK;VOICE:{qrRequest.Phone}\n";
    vCard += "END:VCARD";

    // Generate de QRCode
    QRCodeGenerator qrGenerator = new QRCodeGenerator();
    QRCodeData qrCodeData = qrGenerator.CreateQrCode(vCard, QRCodeGenerator.ECCLevel.Q);
    QRCode qrCode = new QRCode(qrCodeData);

    // Save the QRCode as a jpeg image and send it in the response.
    using (Bitmap qrCodeImage = qrCode.GetGraphic(20))
    using (MemoryStream ms = new MemoryStream())
        qrCodeImage.Save(ms, ImageFormat.Jpeg);

        var response = new HttpResponseMessage()
            Content = new ByteArrayContent(ms.ToArray()),
            StatusCode = HttpStatusCode.OK,
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
        return response;

// Request class to hold the Name and Phone number used to generated the vCard QR Code
public class SimpleVCardRequest
    public string Name { get; set; }
    public string Phone { get; set; }

4. Fixing the missing references

If you read the log you’ll notice the compiler can’t resolve the references to QRCoder and that’s because we are using a 3rd party library to generate the QR codes.

We need to upload the assemblies to the Functions App. Connect to your App via SFTP or your favorite method.

You’ll need to create a bin folder under the folder with your function’s name (i.e. QRCoder) and upload the QRCoder.dll and UnityEngine.dll files to it.


6. Create an HTML endpoint for the function

Head to the Integrate tab and add a new HTML trigger and save it with the default values.


7. Test the Web API

Head to the Develop tab and copy the Function Url:

<img src=”/wp-content/uploads/2016/08/functionUrl.png” alt=”functionUrl” class=”aligncenter” size-medium wp-image-5662” srcset=”/wp-content/uploads/2016/08/functionUrl.png 1800w, /wp-content/uploads/2016/08/functionUrl-300x28.png 300w, /wp-content/uploads/2016/08/functionUrl-768x70.png 768w, /wp-content/uploads/2016/08/functionUrl-1024x94.png 1024w, /wp-content/uploads/2016/08/functionUrl-250x23.png 250w” sizes=”(max-width: 1800px) 100vw, 1800px” />

Now use postman to send payload to the Web API and get a QR Code


The response should show a working QR code like the following:


You can grab the code for the function here:

Hope it helps!