[Question]How to use QRCoder in blazor wasm page

[KanekiQAQ]

Type of issue

[ ] Bug
[*] Question (e.g. about handling/usage)
[ ] Request for new feature/improvement

Expected Behavior

I want to use QRCoder in blazor wasm page,but I have some trouble. When I execute 'qrcode.GetGraphic()', there's an exception.Like this:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Operation is not supported on this platform.
System.PlatformNotSupportedException: Operation is not supported on this platform.
  at System.Drawing.Image..ctor () <0x2eef190 + 0x00010> in <filename unknown>:0 
  at System.Drawing.Bitmap..ctor (System.Int32 width, System.Int32 height, System.Drawing.Imaging.PixelFormat format) <0x2eef0d0 + 0x00002> in <filename unknown>:0 
  at QRCoder.QRCode.GetGraphic (System.Int32 pixelsPerModule, System.Drawing.Color darkColor, System.Drawing.Color lightColor, System.Drawing.Bitmap icon, System.Int32 iconSizePercent, System.Int32 iconBorderWidth, System.Boolean drawQuietZones) <0x2eee848 + 0x00062> in <filename unknown>:0 
  at BlazorFun.Pages.QRCode.Generated () [0x00020] in D:\Project\BlazorFun\BlazorFun\Pages\QRCode.razor:25 
  at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[T] (System.MulticastDelegate delegate, T arg) <0x2dd5a00 + 0x0006e> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync (System.Object arg) <0x2dd5940 + 0x0000a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync (Microsoft.AspNetCore.Components.EventCallbackWorkItem callback, System.Object arg) <0x2dd58a0 + 0x0000a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.EventCallback.InvokeAsync (System.Object arg) <0x2dd5428 + 0x00040> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x2dd3cc8 + 0x000a8> in <filename unknown>:0 

This is my code:

@page "/qrcode"
@using QRCoder;
@using System.Drawing;
<h3>QRCode</h3>

<h3>@url</h3>
<div class="row">
    <div class="col-6">
        <input class="form-control" type="text" @bind="url" />
    </div>

    <button class="btn btn-primary" @onclick="Generated">Get</button>
    <img src="@imgUrl" />
</div>

@code {
    private string url { get; set; }
    private string imgUrl { get; set; }

    private void Generated()
    {
        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCodeData qrCodeData = qrGenerator.CreateQrCode(url, QRCodeGenerator.ECCLevel.Q);
        QRCoder.QRCode qrcode = new QRCoder.QRCode(qrCodeData);
        Bitmap qrCodeImage = qrcode.GetGraphic(5, Color.Black, Color.White, null, 15, 6, false);

        using (var ms = new System.IO.MemoryStream())
        {
            qrCodeImage.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

            imgUrl = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
        }
    }
}

I want to know how to solve this problem. Thanks.

Current Behavior

Possible Solution (optional)

Steps to Reproduce (for bugs)

Your Environment

Version used: 1.3.9 Environment (.NET 3.5, .NET 4.X, .NETCore, ...): .NET Standard 2.1

[Theoistic]

It seems to also have an issue on blazor server side, not just wasm, (running linux docker at least)

[jamie-mh]

System.Drawing is not available on Blazor. Here are the formats that work on Blazor: https://github.com/codebude/QRCoder/issues/201#issuecomment-604833309

You might want to use PngByteQRCode in your case.

[KanekiQAQ]

It seems to also have an issue on blazor server side, not just wasm, (running linux docker at least)

Thanks. I got it.

[KanekiQAQ]

System.Drawing is not available on Blazor. Here are the formats that work on Blazor: #201 (comment)

You might want to use PngByteQRCode in your case.

Thanks. I'll try.

[pekspro]

Here is one way to do it:

@using QRCoder;

<img src="data:image/png;base64,@Base64EncodedQrCode" />

@code {
    public string Base64EncodedQrCode { get; set; } = string.Empty;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCodeData qrCodeData = qrGenerator.CreateQrCode("The text which should be encoded.", QRCodeGenerator.ECCLevel.Q);
        PngByteQRCode pngByteQRCode = new PngByteQRCode(qrCodeData);
        Base64EncodedQrCode = Convert.ToBase64String(pngByteQRCode.GetGraphic(10));
    }
}