Skip to content

Commit 0376dc7

Browse files
Int32Overflowmckaragoz
Int32Overflow
and
mckaragoz
authored
Implement MudQrCode as SVG Image (#182)
* Implement MudQrCode as SVG Image * Cleanup --------- Co-authored-by: mckaragoz <78308169+mckaragoz@users.noreply.github.com>
1 parent 8a5808a commit 0376dc7

8 files changed

Lines changed: 78 additions & 48 deletions

File tree

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@
3030

3131
<ItemGroup>
3232
<PackageReference Include="MudBlazor" Version="6.2.1" />
33-
<PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.3" />
3433
<PackageReference Include="ZXing.Net" Version="0.16.9" />
35-
<PackageReference Include="ZXing.Net.Bindings.SkiaSharp" Version="0.16.13" />
3634
</ItemGroup>
3735

3836
<ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,24 @@
22
@inherits MudComponentBase
33

44
<a href="@(Clickable ? Value : null)" target="@Target">
5-
@{
6-
var content = GetQrCode();
5+
@{
6+
var content = GetCode();
77
}
88
@if (content != null)
99
{
10-
<MudImage Src="@(content == null ? null : String.Format("data:image/png;base64,{0}", Convert.ToBase64String(content)))" Height="Height" Width="Width" Class="@Class" Style="@Style" />
10+
<svg width="@Width" height="@Height">
11+
@for (int y = 0; y < content.Rows; y++)
12+
{
13+
@for(int x = 0; x < content.Columns; x++)
14+
{
15+
@if(content[x,y])
16+
{
17+
<rect width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="fill:black; stroke-width:1px; stroke:black"
18+
x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
19+
}
20+
}
21+
}
22+
</svg>
1123
}
1224
else
1325
{

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

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,42 @@
11
using Microsoft.AspNetCore.Components;
22
using MudBlazor;
3-
using SkiaSharp;
43
using ZXing;
5-
using ZXing.QrCode;
6-
using ZXing.SkiaSharp;
4+
using ZXing.Common;
75

86
namespace MudExtensions
97
{
108
public partial class MudQrCode : MudComponentBase
119
{
10+
private static readonly Writer Encoder = new MultiFormatWriter();
11+
1212
[Parameter]
13-
public string Value { get; set; }
13+
public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
1414

15+
/// <summary>
16+
/// If true, it goes to specified href when click.
17+
/// </summary>
1518
[Parameter]
16-
public EventCallback<string> ValueChanged { get; set; }
19+
public bool Clickable { get; set; }
1720

1821
[Parameter]
19-
public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
22+
public string ErrorText { get; set; }
2023

2124
[Parameter]
2225
public int Width { get; set; } = 200;
2326

2427
[Parameter]
2528
public int Height { get; set; } = 200;
2629

27-
/// <summary>
28-
/// If true, it goes to specified href when click.
29-
/// </summary>
30-
[Parameter]
31-
public bool Clickable { get; set; }
32-
3330
[Parameter]
3431
public string Target { get; set; } = "_blank";
3532

3633
[Parameter]
37-
public string ErrorText { get; set; }
34+
public string Value { get; set; }
3835

39-
/// <summary>
40-
/// If true, no text show on barcode format.
41-
/// </summary>
4236
[Parameter]
43-
public bool PureBarcode { get; set; }
37+
public EventCallback<string> ValueChanged { get; set; }
4438

45-
protected byte[] GetQrCode()
39+
protected QRCodeResult GetCode()
4640
{
4741
if (string.IsNullOrEmpty(Value))
4842
{
@@ -51,25 +45,29 @@ protected byte[] GetQrCode()
5145

5246
try
5347
{
54-
BarcodeWriter writer = new BarcodeWriter
48+
var width = Width;
49+
var height = Height;
50+
51+
if (BarcodeFormat == BarcodeFormat.All_1D)
5552
{
56-
Format = BarcodeFormat,
57-
Options = new QrCodeEncodingOptions
53+
}
54+
else
55+
{
56+
if (width > height)
57+
{
58+
width = height;
59+
}
60+
else
5861
{
59-
Width = Width,
60-
Height = Height,
61-
PureBarcode = PureBarcode,
62+
height = width;
6263
}
63-
};
64+
}
6465

65-
var qrCodeImage = writer.Write(Value);
66+
var matrix = Encoder.encode(Value, BarcodeFormat, 0, 0);
6667

67-
using (var stream = new MemoryStream())
68-
{
69-
qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100);
70-
ErrorText = null;
71-
return stream.ToArray();
72-
}
68+
var moduleSizeX = width / matrix.Width;
69+
var moduleSizeY = height / matrix.Height;
70+
return new QRCodeResult(matrix, moduleSizeX, moduleSizeY);
7371
}
7472
catch (Exception ex)
7573
{
@@ -79,4 +77,4 @@ protected byte[] GetQrCode()
7977
}
8078

8179
}
82-
}
80+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using ZXing.Common;
7+
8+
namespace MudExtensions
9+
{
10+
public class QRCodeResult
11+
{
12+
private readonly BitMatrix bitMatrix;
13+
14+
public QRCodeResult(BitMatrix bitMatrix, int moduleSizeX, int moduleSizeY)
15+
{
16+
this.bitMatrix = bitMatrix ?? throw new ArgumentNullException(nameof(bitMatrix));
17+
ModuleSizeX = moduleSizeX;
18+
ModuleSizeY = moduleSizeY;
19+
}
20+
21+
public int Columns => bitMatrix.Width;
22+
public int ModuleSizeX { get; }
23+
public int ModuleSizeY { get; }
24+
public int Rows => bitMatrix.Height;
25+
26+
public bool this[int x, int y] => bitMatrix[x, y];
27+
}
28+
}

‎ComponentViewer.Docs/ComponentViewer.Docs.csproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
<ItemGroup>
1515
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.1" />
1616
<PackageReference Include="MudBlazor" Version="6.2.1" />
17-
<PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.3" />
1817
</ItemGroup>
1918

2019
<ItemGroup>

‎ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<MudGrid>
44
<MudItem xs="12" sm="8" Class="d-flex justify-center">
5-
<MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" PureBarcode="_pureBarcode" />
5+
<MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" />
66
</MudItem>
77

88
<MudItem xs="12" sm="4">
@@ -13,7 +13,6 @@
1313
<MudSelectExtended ItemCollection="@(Enum.GetValues<BarcodeFormat>())" @bind-Value="_barcodeFormat" Label="Barcode Format" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
1414
<MudText Color="Color.Error">@(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText)</MudText>
1515
<MudSwitchM3 @bind-Checked="_clickable" Color="Color.Secondary" Label="Clickable" />
16-
<MudSwitchM3 @bind-Checked="_pureBarcode" Color="Color.Secondary" Label="Pure Barcode" />
1716
</MudStack>
1817
</MudItem>
1918
</MudGrid>
@@ -25,5 +24,4 @@
2524
int _height = 200;
2625
BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
2726
bool _clickable = false;
28-
bool _pureBarcode = false;
2927
}

‎ComponentViewer.Wasm/App.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@
3030
var assemblies = await AssemblyLoader
3131
.LoadAssembliesAsync(new[]
3232
{
33-
"SkiaSharp.dll",
33+
//"SkiaSharp.dll",
3434
"zxing.dll",
35-
"ZXing.SkiaSharp.dll",
36-
"SkiaSharp.Views.Blazor.dll"
35+
//"ZXing.SkiaSharp.dll",
36+
//"SkiaSharp.Views.Blazor.dll"
3737
});
3838
_lazyLoadedAssemblies.AddRange(assemblies);
3939
}

‎ComponentViewer.Wasm/ComponentViewer.Wasm.csproj‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@
1212
</ItemGroup>
1313

1414
<ItemGroup>
15-
<BlazorWebAssemblyLazyLoad Include="SkiaSharp.dll" />
1615
<BlazorWebAssemblyLazyLoad Include="zxing.dll" />
17-
<BlazorWebAssemblyLazyLoad Include="ZXing.SkiaSharp.dll" />
18-
<BlazorWebAssemblyLazyLoad Include="SkiaSharp.Views.Blazor.dll" />
1916
</ItemGroup>
2017

2118
<ItemGroup>

0 commit comments

Comments
 (0)