Advanced usage QR Code renderers

1. Introduction to the "QR Code Renderers"
2. Overview of the different Renderers
   2.1. QRCode-Renderer in detail
   2.2. AsciiQrCode-Renderer in detail
   2.3. Base64QRCode-Renderer in detail
   2.4. BitmapByteQRCode-Renderer in detail
   2.5. SvgQRCode-Renderer in detail
   2.6. UnityQRCode-Renderer in detail

1. Introduction to the "QR Code Renderers"

As explained in the architectural overview, the QRCoder separates data/information from output/representation. So in data/core layer you create the QR Code information:

CodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The payload aka the text which should be encoded.", QRCodeGenerator.ECCLevel.Q);

Now you have to bring this information into a representation you like - or better said - you have to convert this information into the output format you like. Therefore you can use the so called "QR Code renderers". This are classes of the QRCoder which help you to represent that QrCodeData the way you prefer. Each renderer-class has a function called "GetGraphic" which returns the graphical representation of the QR Code.

Before we have a look at each of the renderers, let's have a quick look onto the following comparison table which shows the benefits of each of the renderer classes.

2. Overview of the different Renderers

Name	Where to use?	Output Format
QRCode	In full .NET Framework environments	Bitmap-object (System.Drawing.Bitmap)
AsciiQrCode	In .NET Standard / .NET Core environments	String (QR Code encoded as ASCII chars)
Base64QRCode	In full .NET Framework environments	String (QR Code encoded as Base64)
BitmapByteQRCode	In .NET Standard / .NET Core environments	Byte-Array containing RAW-Bitmap
SvgQRCode	In full .NET Framework environments	String (QR Coded as SVG vector graphic)
UnityQRCode	In full .NET Framework environments	Texture2D (UnityEngine.Texture2D)

2.1 QRCode-Renderer in detail

Classname/Classfile: QRCode/QRCode.cs

When to use?

Use it if you want a pixel-based image (=Bitmap) and if you are working with .NET Framework. Use it if you want to show the QR Code in your app, save the QR Code as image file or deliver the QR Code as download.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);

Parameter table

There are four different overloads:

Overload 1 (Return type: Bitmap)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn

Overload 2 (Return type: Bitmap)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 3 (Return type: Bitmap)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColorHtmlHex	string		The color of the dark/black modules in hex (e.g. #000000) representation
lightColorHtmlHex	string		The color of the light/white modules in hex (e.g. #ffffff) representation
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 4 (Return type: Bitmap)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
icon	Bitmap	null	If null, then ignored. If set, the Bitmap is drawn in the middle of the QR Code
iconSizePercent	int	15	Value from 1-99. Sets how much % of the QR Code will be covered by the icon
iconBorderWidth	int	6	Width of the border which is drawn around the icon. Minimum: 1
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Good to know

This renderer is the way to go, if you want to draw an icon onto the QR Code.In most cases this renderer fits the needs very well.

2.2 AsciiQRCode-Renderer in detail

Classname/Classfile: AsciiQRCode / AsciiQRCode.cs

When to use?

Useful for web- and retro-environments. By use of this encoder you get a QR code encoded as string just build out of ASCII chars.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
AsciiQRCode qrCode = new AsciiQRCode(qrCodeData);
string qrCodeAsAsciiArt = qrCode.GetGraphic(1);

Parameter table

There are four different overloads:

Overload 1 (Return type: string)

Parameter name	Type	Default	Description
repeatPerModule	int		Number of repeated darkColorString/whiteSpaceString per module.

Overload 2 (Return type: string)

Parameter name	Type	Default	Description
repeatPerModule	int		Number of repeated darkColorString/whiteSpaceString per module.
darkColorString	string		String for use as dark color modules. In case of string make sure whiteSpaceString has the same length.
whiteSpaceString	string		String for use as white modules (whitespace). In case of string make sure darkColorString has the same length.
endOfLine	string	"\n"	End of line separator. (Default: \n)

Overload 3 (Return type: string[])

Parameter name	Type	Default	Description
repeatPerModule	int		Number of repeated darkColorString/whiteSpaceString per module.

Overload 4 (Return type: string[])

Parameter name	Type	Default	Description
repeatPerModule	int		Number of repeated darkColorString/whiteSpaceString per module.
darkColorString	string		String for use as dark color modules. In case of string make sure whiteSpaceString has the same length.
whiteSpaceString	string		String for use as white modules (whitespace). In case of string make sure darkColorString has the same length.

Good to know

If you use overload 2 or 4 you should take care that the string length of darkColorString equals the string length of whiteSpaceString. Also you should keep in mind that this type of rendering only works when shown in a so called "Monospace" font.

2.3 Base64QRCode-Renderer in detail

Classname/Classfile: Base64QRCode / Base64QRCode.cs

When to use?

Usually very helpful in web and database environments. You can embed the Base64 images into html code, easily trafer them via HTTP requests or write them into databases without any hassle.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
Base64QRCode qrCode = new Base64QRCode(qrCodeData);
string qrCodeImageAsBase64 = qrCode.GetGraphic(20);

Parameter table

There are four different overloads:

Overload 1 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn

Overload 2 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code
imgType	Base64QRCode.ImageType	Base64QRCode .ImageType.Png	Sets the image format of the image which is encoded in the Base64 string

Overload 3 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColorHtmlHex	string		The color of the dark/black modules in hex (e.g. #000000) representation
lightColorHtmlHex	string		The color of the light/white modules in hex (e.g. #ffffff) representation
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code
imgType	Base64QRCode.ImageType	Base64QRCode .ImageType.Png	Sets the image format of the image which is encoded in the Base64 string

Overload 4 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
icon	Bitmap	null	If null, then ignored. If set, the Bitmap is drawn in the middle of the QR Code
iconSizePercent	int	15	Value from 1-99. Sets how much % of the QR Code will be covered by the icon
iconBorderWidth	int	6	Width of the border which is drawn around the icon. Minimum: 1
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code
imgType	Base64QRCode.ImageType	Base64QRCode .ImageType.Png	Sets the image format of the image which is encoded in the Base64 string

Good to know

The string returned by the GetGraphic-method just contains the image as Base64 string. It does not contain any HTML tags, etc. If you like to embed the image for example, you have to add the img-tag. E.g.

//...
var imgType = Base64QRCode.ImageType.Jpeg;
Base64QRCode qrCode = new Base64QRCode(qrCodeData);
string qrCodeImageAsBase64 = GetGraphic(20,Color.Black, Color.White, true, imgType);
var htmlPictureTag =  $"<img alt=\"Embedded QR Code\" src=\"data:image/{imgType.ToString().ToLower()};base64,{qrCodeImageAsBase64}\" />";

2.4 BitmapByteQRCode-Renderer in detail

Classname/Classfile: BitmapByteQRCode / BitmapByteQRCode.cs

When to use?

When using the PCL version of the QRCoder (e.g. in mobile projects) this is the only available renderer. It returns the QR code as byte-array which contains a Bitmap graphic. Since many of the platforms where the PCL library is available have different implementations of Bitmap class, but nearly any platform can create an image from byte[], this is some way of dealing with images cross-platforms.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
BitmapByteQRCode qrCode = new BitmapByteQRCode(qrCodeData);
byte[] qrCodeAsBitmapByteArr = qrCode.GetGraphic(20);

//From here on, you can implement your platform-dependent byte[]-to-image code 

//e.g. Windows 10 - Full .NET Framework
Bitmap bmp;
using (var ms = new MemoryStream(qrCodeAsBitmapByteArr))
{
    qrCodeImage = new Bitmap(ms);
}

//e.g. Windows 10 Universal App (UAP)
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
    using (DataWriter writer = new DataWriter(stream.GetOutputStreamAt(0)))
    {
    	writer.WriteBytes(qrCodeImage);
        await writer.StoreAsync();
    }
    var image = new BitmapImage();
    await image.SetSourceAsync(stream);

    imageViewer.Source = image;
}

Parameter table

There is one overload:

Overload 1 (Return type: byte[])

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn

Good to know

Since this method shall be 100% platform independent the Bitmap in the byte[] is created manually byte by byte. So this renderer doesn't offer any fancy parameters right now. If you are an Bitmap expert feel free to improve the code. If you aren't but want a cool QR code, use the QR code module matrix and create your own renderer.

2.5 SvgQRCode-Renderer in detail

Classname/Classfile: SvgQRCode / SvgQRCode.cs

When to use?

Use this if you want to print the QR code in a huge size or when dealing with scalable (in sense of screensize) web applications. The SvgQRCode returns a scalable vector graphic which never gets blurry by its nature.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
SvgQRCode qrCode = new SvgQRCode(qrCodeData);
string qrCodeAsSvg = qrCode.GetGraphic(20);

Parameter table

There are six overloads:

Overload 1 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel per b/w QR code module. This x module count = ViewBox size

Overload 2 (Return type: string)

Parameter name	Type	Default	Description
viewBox	Size		Size of the SVG viewbox
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 3 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel per b/w QR code module. This x module count = ViewBox size
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 4 (Return type: string)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel per b/w QR code module. This x module count = ViewBox size
darkColorHtmlHex	string		The color of the dark/black modules in hex (e.g. #000000) representation
lightColorHtmlHex	string		The color of the light/white modules in hex (e.g. #ffffff) representation
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 5 (Return type: string)

Parameter name	Type	Default	Description
viewBox	Size		Size of the SVG viewbox
darkColor	Color		The color of the dark/black modules
lightColor	Color		The color of the light/white modules
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Overload 6 (Return type: string)

Parameter name	Type	Default	Description
viewBox	Size		Size of the SVG viewbox
darkColorHtmlHex	string		The color of the dark/black modules in hex (e.g. #000000) representation
lightColorHtmlHex	string		The color of the light/white modules in hex (e.g. #ffffff) representation
drawQuietZones	bool	true	If true a white border is drawn around the whole QR Code

Good to know

The string returned just contains the plain SVG. You can save it to file via StreamWriter-class or File.WriteAllText-method or you can embed into a website. But don't forget to write the correct tags around the SVG string. (Have a look here.)

2.6 UnityQRCode-Renderer in detail

Classname/Classfile: UnityQRCode / UnityQRCode.cs

When to use?

Use this renderer if you are working on an Unity-based app or game. This renderer return a Texture2D object for easier handling. It saves you some time, compared to the other renders.

How to use it - simple way

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
UnityQRCode qrCode = new UnityQRCode(qrCodeData);
Texture2D qrCodeAsTexture2D = qrCode.GetGraphic(20);

Parameter table

There are 3 overloads:

Overload 1 (Return type: Texture2D)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn

Overload 2 (Return type: Texture2D)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColorHtmlHex	string		The color of the dark/black modules in hex (e.g. #000000) representation
lightColorHtmlHex	string		The color of the light/white modules in hex (e.g. #ffffff) representation

Overload 3 (Return type: Texture2D)

Parameter name	Type	Default	Description
pixelsPerModule	int		The pixel size each b/w module is drawn
darkColor	UnityEngine.Color		The color of the dark/black modules
lightColor	UnityEngine.Color		The color of the light/white modules

Good to know

This renderer is some kind of experimental. There are some reports that it sometimes is buggy on iOS devices, whilst Android, Windows and Linux should be working fine. So please test your project in an appropriate manner when using this renderer.