Skip to content

Advanced usage QR Code renderers

Raffael Herrmann edited this page May 9, 2017 · 38 revisions
  1. Introduction to the "QR Code Renderers"
  2. Overview of the different Renderers
  3. QRCode-Renderer in detail
  4. Base64QRCode-Renderer in detail
  5. BitmapByteQRCode-Renderer in detail
  6. SvgQRCode-Renderer in detail
  7. UnityQRCode-Renderer in detail

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.

Overview of the different Renderers

Name Where to use? Output Format
QRCode In full .NET Framework environments Bitmap-object (System.Drawing.Bitmap)
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)

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.

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}\" />"; ```


## BitmapByteQRCode-Renderer in detail
**Classname/Classfile:** BitmapByteQRCode / BitmapByteQRCode.cs

#### When to use?
(*coming soon*)

#### How to use it - simple way

coming soon


#### Parameter table
(*coming soon*)

#### Good to know
(*coming soon*)


## SvgQRCode-Renderer in detail
**Classname/Classfile:** SvgQRCode / SvgQRCode.cs

#### When to use?
(*coming soon*)

#### How to use it - simple way

coming soon


#### Parameter table
(*coming soon*)

#### Good to know
(*coming soon*)


## UnityQRCode-Renderer in detail
**Classname/Classfile:** UnityQRCode / UnityQRCode.cs

#### When to use?
(*coming soon*)

#### How to use it - simple way

coming soon


#### Parameter table
(*coming soon*)

#### Good to know
(*coming soon*)
Clone this wiki locally