Hello Doug,

This feature request is marked as Completed and is available in version 2.27.0 and later:

Scanning

When you say "extract" are you describing is you want to scan a QR code? That's very different than rendering a barcode, it has nothing to do with UI. Telerik UI for Blazor is a UI component library, so it will provide options for your web app's UI that will render barcodes/QR. If you want to scan or process a QR code, then you'll need to use a library that is for barcode/QR code processing. A very popular library for this is zebra crossing (ZXing.net), you can find the repo and documentation here => https://github.com/micjahn/ZXing.Net. 

Image Processing

What I think you actually want to do is If you only want to copy the image of the QR code and embed it into a PDF document as a bitmap, then you'll need a library that lets you render components of a rendered webpage as some sort of image type (rasterization or vector).

The good news is you can get a headstart on this by configuring TelerikBarcode control to render as an SVG (vector) or render on a canvas (rasterization). This is set using the RenderAs property, see => Blazor QRCode Overview | Telerik UI for Blazor for more information.

How you extract the rendered DOM element into a file is up to you, the UI control has already done it's job after it was rendered on the page. The reason I mentioned the RenderAs option is because the HTML canvas lets you easily save the canvas's content as a png file with just 2 lines of JavaScript.

There are a bunch of articles online on how to do this, I think this one is the closest to what you need Saving HTML 5 Canvas as Image on the server using ASP.NET - Stack Overflow

Recommendation

My recommendation is to not even bother with trying to render an image file from the webpage's element.  Just use ZXing.NET to create an in-memory QR code by using the same data that you used to create the TelerikBarcode with.

This is exactly what my demo below is doing, so you can just copy/paste the bulk from there and use that as a starting point.

Regards,
Lance | Manager Technical Support
Progress Telerik

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);
img.SaveAsPng(ms);

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.

Regards,
Lance | Manager - Technical Support
Progress Telerik

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

Regards,
Marin Bratanov
Progress Telerik