Implement MudQrCode as SVG Image (#182)

* Implement MudQrCode as SVG Image

* Cleanup

---------

Co-authored-by: mckaragoz <[email protected]>

Author: Int32Overflow

CodeBeam.MudBlazor.Extensions.MudQrCode/CodeBeam.MudBlazor.Extensions.MudQrCode.csproj

@@ -30,9 +30,7 @@
 
 	<ItemGroup>
 		<PackageReference Include="MudBlazor" Version="6.2.1" />
-		<PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.3" />
 		<PackageReference Include="ZXing.Net" Version="0.16.9" />
-		<PackageReference Include="ZXing.Net.Bindings.SkiaSharp" Version="0.16.13" />
 	</ItemGroup>
 
 	<ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">

CodeBeam.MudBlazor.Extensions.MudQrCode/Components/QrCode/MudQrCode.razor

@@ -2,12 +2,24 @@
 @inherits MudComponentBase
 
 <a href="@(Clickable ? Value : null)" target="@Target">
-    @{
-        var content = GetQrCode();
+   @{
+        var content = GetCode();
     }
     @if (content != null)
     {
-        <MudImage Src="@(content == null ? null : String.Format("data:image/png;base64,{0}", Convert.ToBase64String(content)))" Height="Height" Width="Width" Class="@Class" Style="@Style" />
+        <svg width="@Width" height="@Height">
+            @for (int y = 0; y < content.Rows; y++)
+            {
+                @for(int x = 0; x < content.Columns; x++)
+                {
+                    @if(content[x,y])
+                    {
+                        <rect width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="fill:black; stroke-width:1px; stroke:black" 
+                              x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
+                    }
+                }
+            }
+        </svg>
     }
     else
     {

CodeBeam.MudBlazor.Extensions.MudQrCode/Components/QrCode/MudQrCode.razor.cs

@@ -1,48 +1,42 @@
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
-using SkiaSharp;
 using ZXing;
-using ZXing.QrCode;
-using ZXing.SkiaSharp;
+using ZXing.Common;
 
 namespace MudExtensions
 {
     public partial class MudQrCode : MudComponentBase
     {
+        private static readonly Writer Encoder = new MultiFormatWriter();
+
         [Parameter]
-        public string Value { get; set; }
+        public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
 
+        /// <summary>
+        /// If true, it goes to specified href when click.
+        /// </summary>
         [Parameter]
-        public EventCallback<string> ValueChanged { get; set; }
+        public bool Clickable { get; set; }
 
         [Parameter]
-        public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
+        public string ErrorText { get; set; }
 
         [Parameter]
         public int Width { get; set; } = 200;
 
         [Parameter]
         public int Height { get; set; } = 200;
 
-        /// <summary>
-        /// If true, it goes to specified href when click.
-        /// </summary>
-        [Parameter]
-        public bool Clickable { get; set; }
-
         [Parameter]
         public string Target { get; set; } = "_blank";
 
         [Parameter]
-        public string ErrorText { get; set; }
+        public string Value { get; set; }
 
-        /// <summary>
-        /// If true, no text show on barcode format.
-        /// </summary>
         [Parameter]
-        public bool PureBarcode { get; set; }
+        public EventCallback<string> ValueChanged { get; set; }
 
-        protected byte[] GetQrCode()
+        protected QRCodeResult GetCode()
         {
             if (string.IsNullOrEmpty(Value))
             {
@@ -51,25 +45,29 @@ protected byte[] GetQrCode()
 
             try
             {
-                BarcodeWriter writer = new BarcodeWriter
+                var width = Width;
+                var height = Height;
+
+                if (BarcodeFormat == BarcodeFormat.All_1D)
                 {
-                    Format = BarcodeFormat,
-                    Options = new QrCodeEncodingOptions
+                }
+                else
+                {
+                    if (width > height)
+                    {
+                        width = height;
+                    }
+                    else
                     {
-                        Width = Width,
-                        Height = Height,
-                        PureBarcode = PureBarcode,
+                        height = width;
                     }
-                };
+                }
 
-                var qrCodeImage = writer.Write(Value);
+                var matrix = Encoder.encode(Value, BarcodeFormat, 0, 0);
 
-                using (var stream = new MemoryStream())
-                {
-                    qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100);
-                    ErrorText = null;
-                    return stream.ToArray();
-                }
+                var moduleSizeX = width / matrix.Width;
+                var moduleSizeY = height / matrix.Height;
+                return new QRCodeResult(matrix, moduleSizeX, moduleSizeY);
             }
             catch (Exception ex)
             {
@@ -79,4 +77,4 @@ protected byte[] GetQrCode()
         }
 
     }
-}
+}

CodeBeam.MudBlazor.Extensions.MudQrCode/Components/QrCode/QRCodeResult.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using ZXing.Common;
+
+namespace MudExtensions
+{
+    public class QRCodeResult
+    {
+        private readonly BitMatrix bitMatrix;
+
+        public QRCodeResult(BitMatrix bitMatrix, int moduleSizeX, int moduleSizeY)
+        {
+            this.bitMatrix = bitMatrix ?? throw new ArgumentNullException(nameof(bitMatrix));
+            ModuleSizeX = moduleSizeX;
+            ModuleSizeY = moduleSizeY;
+        }
+
+        public int Columns => bitMatrix.Width;
+        public int ModuleSizeX { get; }
+        public int ModuleSizeY { get; }
+        public int Rows => bitMatrix.Height;
+
+        public bool this[int x, int y] => bitMatrix[x, y];
+    }
+}

ComponentViewer.Docs/ComponentViewer.Docs.csproj

@@ -14,7 +14,6 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.1" />
     <PackageReference Include="MudBlazor" Version="6.2.1" />
-    <PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.3" />
   </ItemGroup>
 
   <ItemGroup>

ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor

@@ -2,7 +2,7 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex justify-center">
-        <MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" PureBarcode="_pureBarcode" />
+        <MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -13,7 +13,6 @@
             <MudSelectExtended ItemCollection="@(Enum.GetValues<BarcodeFormat>())" @bind-Value="_barcodeFormat" Label="Barcode Format" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudText Color="Color.Error">@(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText)</MudText>
             <MudSwitchM3 @bind-Checked="_clickable" Color="Color.Secondary" Label="Clickable" />
-            <MudSwitchM3 @bind-Checked="_pureBarcode" Color="Color.Secondary" Label="Pure Barcode" />
         </MudStack>
     </MudItem>
 </MudGrid>
@@ -25,5 +24,4 @@
     int _height = 200;
     BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
     bool _clickable = false;
-    bool _pureBarcode = false;
 }

ComponentViewer.Wasm/App.razor

@@ -30,10 +30,10 @@
                 var assemblies = await AssemblyLoader
                     .LoadAssembliesAsync(new[]
                     {
-                        "SkiaSharp.dll",
+                        //"SkiaSharp.dll",
                         "zxing.dll",
-                        "ZXing.SkiaSharp.dll",
-                        "SkiaSharp.Views.Blazor.dll"
+                        //"ZXing.SkiaSharp.dll",
+                        //"SkiaSharp.Views.Blazor.dll"
                     });
                 _lazyLoadedAssemblies.AddRange(assemblies);
             }

ComponentViewer.Wasm/ComponentViewer.Wasm.csproj

@@ -12,10 +12,7 @@
   </ItemGroup>
 
 	<ItemGroup>
-		<BlazorWebAssemblyLazyLoad Include="SkiaSharp.dll" />
 		<BlazorWebAssemblyLazyLoad Include="zxing.dll" />
-		<BlazorWebAssemblyLazyLoad Include="ZXing.SkiaSharp.dll" />
-		<BlazorWebAssemblyLazyLoad Include="SkiaSharp.Views.Blazor.dll" />
 	</ItemGroup>
 
   <ItemGroup>