Last Updated: 03 Aug 2020 16:17 by ADMIN
Created on: 02 Apr 2020 12:43
Category: UI for Blazor
Type: Feature Request
barcode / qr codes for blazor
Hi I need to do barcode / QR code (mostly QR code) in Blazor.  It is not on the roadmap, so I don't expect it anytime in the next 6 months.  Great support for QR code in Asp.Net Core UI, but I don't think they mix, and I'm writing in pure Blazor.  Suggestions?
Lance | Manager Technical Support
Posted on: 03 Aug 2020 16:17

Hello Brian,

As Marin mentions, this is not yet available via UI for Blazor, but you can use Kendo and client-side JavaScript.

If you must do this in .NET, you can generate the barcode using ZXing.NET (a popular open source library available via NuGet). It provides a .NET Standard library, which is consumable in a .NET Core project.

.NET Approach Demo

I have attached a runnable demo as an example. Rebuild the solution to restore the NuGet packages and deploy the client project.

Note that the example uses the Telerik NuGet server, if visual Studio prompts you for credentials, be sure to use the same Telerik account you have a UI for Blazor license with.

Here's a screenshot at runtime after you click the "Generate QR Code" button:

Let me briefly go through the concepts in the example. 

Phase 1 - QR Code Creation

The relevant code that creates the QR code is the following:

var qrCodeWriter = new ZXing.BarcodeWriterPixelData
    Format = ZXing.BarcodeFormat.QR_CODE,
    Options = new QrCodeEncodingOptions
        Height = height,
        Width = width,
        Margin = margin

PixelData pixelData = qrCodeWriter.Write("What I want to be in the QR code");

// You now have the QR code's image via an RGBA pixel array
// You can encode it to any format you want or just work with the pixel data directly
byte[] qrcodePixels = pixelData.Pixels;

This will get you a RGBA32 byte[] of the pixels for the QR code (the qrcodePixels). This part of the operation is done, you have a QR code in a raw pixel array and can do what you need to with it next.

Phase 2 - Image Format Encoding

The next phase would be to encode that pixel data with an image format. Once encoded, you can save it to a file or convert it to Base64 (to be used in <img src="base64 goes here"/>).

There are several ways you can do this, in the demo I explain three primary approaches:

  1. Encode the byte[] manually
  2. Encode using Microsoft SkiaSharp
  3. Encode with a 3rd party imaging library

// **** 1. Encode it yourself Option **** //
// see https://stackoverflow.com/a/60081362/1406210

// **** 2. SkiaSharp Option **** //

// This is a native Microsoft option that works on almost every platform
// Unfortunately, they are still working on WASM support right now.
// When that is done, you can use the following encoding option.

//var skBitmap = SKBitmap.Decode(pixelData.Pixels, new SKImageInfo(width,height));
//skBitmap.Encode(ms, SKEncodedImageFormat.Png, 90);

// **** 3. Third-party Image Library option (ImageSharp) **** //

// This is a 3rd party imaging library that has a commercial license (see https://sixlabors.com/products/imagesharp/ )
var img = Image.LoadPixelData<Rgba32>(qrcodePixels, width, height);

I personally prefer using SkiaSharp as my go-to solution for rendering, but they're still working on getting the native WASM library bindings. See Mathew Leibowitz's reply to me (Matthew is the genius behind Microsoft SkiaSharp).

Wrapping Up

Even though this isn't a UI for Blazor feature yet, I hope I was able to provide you with information to help you make an informed decision.

We want you to be successful when using the Telerik components, even if there is a temporary missing feature while we work to get you everything you need.

If you haven't done it yet, click the  "Follow" button so that you can be alerted when the Feature Request's status changes. Thank you for your patience and understanding.

Lance | Manager - Technical Support
Progress Telerik

Attached Files:
Marin Bratanov
Posted on: 02 Apr 2020 12:44

Hi Brian,

At the moment you can consider including jQuery widgets like Kendo UI as explained here: https://docs.telerik.com/blazor-ui/knowledge-base/jquery-kendo-in-blazor


Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.