From 065ae67228c0d6c6dcddc53c848f7368948938e7 Mon Sep 17 00:00:00 2001 From: "AzureAD\\SandhiyaNatesh" Date: Fri, 26 Jul 2024 13:00:54 +0530 Subject: [PATCH 1/4] 899102: UG for QRcode Logo --- ej2-asp-core-mvc/barcode/images/logo.png | Bin 0 -> 2731 bytes ej2-asp-core-mvc/barcode/qrcodegenerator.md | 29 ++++++++++++++---- .../code-snippet/barcode/qrcode/logo/logo.cs | 18 +++++++++++ .../code-snippet/barcode/qrcode/logo/razor | 6 ++++ .../barcode/qrcode/logo/tagHelper | 3 ++ 5 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 ej2-asp-core-mvc/barcode/images/logo.png create mode 100644 ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/logo.cs create mode 100644 ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor create mode 100644 ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper diff --git a/ej2-asp-core-mvc/barcode/images/logo.png b/ej2-asp-core-mvc/barcode/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..aad02dc51bfce7155e6f3f16cfe3bd2c28f02e39 GIT binary patch literal 2731 zcmdT`dpHyB9-m7;rKG6`6``WUNC+i<%3bOpm(ggyF_&5U)qXC;HgQ78O6DXdIw^OP z+pvXlEx8=mv0*ZgH8UpKvNb#Foaa1Goc=uLkMqZS`M&S-e&5gYdB5-X^S$?{OHN9P z2NVGSfRc-|y(a)56DyrFxBnvT@ovgl(m@98>2w}I?AKsR4f#+zcRK)}8o%=!beq)P z@w+n^4FK$J|K4P}Q6<3ufa0$%_I6id1G!U})Q}KO1sN-l+jD9Bql>cN?+9TosemSyU3R$A7T@y=z68- z6lJOwP0F>3gR>^k%clh!OROa2I93zOnq?I_AQtkhLzgcuvUdQ6aw{bA+WTdcA7m#e zIJ>@)JE}V)lcmA~xa^2ccp-27tEcQCZTD2z>sG#|x=3S?_;lI= z4L`*HOCnwnYnr$j4LDd6CN?ySjw(^Jpzr$pn2?2W;?lAn0XHM;Im}TvfMg@+MEmf7 zmkrm@3_AuHQsrdJnjk^$VKd)w^eGupEuTf>n(%gxhY%Eexbrz#<>3 z$+~4)ed3EIh~W=d6YvKZUE?D^u!QEpBK7AZ6>jwsSE=F??B$Z6fSW(N&#m5hVkCNJ zj-h&v(TPI~TvxikA`%0OSAV;ie#4qm*{-VABCs_#1;4AXZTse@2zf|wAQ*b)Ogp-* z7+Z^)Iw?kcQaH!SMf7*Vzj^U8GmI!L4l`<;NfdfpSTN$z;)R*Yz-BVmynG^G|3ES! zA=JZ7lV>p<3#$Ov7Hx!o-5#4v&_6I=Dq9RLdjqbh<5GQSe565pB$rnIv_E{wMuFDg zjza2958H*R&8526bnk1yhv6OQMS%s8-b*bTCj7 z{|qbV_$VQzhmUjk797>Vz}c9(*M30(W8#m_4m1c7aiPt?4Askn8P(9h3WFw)mVc|s zlB931NpoBb#FWz>s-YE-kJDL-!%uLao_ooTQj8?WkB29QHsBpATkFvKJH z`j7RrdLyKk~qMRne;tHkJc#UO^qjg>;ma!vlR+mx{4Evr)@sdT%)Q z;T2b#YP^D2OSM&3(46mQ4({Qd^!-xT+Y|V%bu}$@uZ@pyTiEA)O6d`qyXn_+hk$e1 zsD>ch&-ljWJKX{!(&?w7{JqRv7O8WpHNK9R>wQjdy=B<9BLE-g02zKIXcA1XkKi4m z2cypko387|XNRls3?uyHu&cH7+0sxFpH^WoA1gNb0P7~QV{ZNh0qf`w{uwlWt z%1WDQ6tdl;TOf-Ci`(Ds5&w(_>Gp2gGFpUOIjY6h-Oet-xkN$7ICv}#tbmEw=6$NG9RLqQLl_l<)9Ff`uKym zwFygMND9?f^Kn9`Uv5(9A79$a6<;k-7R>(Ol^*?nruFeP`_6AJS$1b7+2qQH+Ur@{}&u0<^ZTPZ_&X-1t$X+?APw zdh~jYX~3MQH13f8yK)5F9h8@mK41$vgk57dGB>_NapM`{*@^0JscKSOerzj3U;~N& zM3fULCk=Z-vOW52L+{KVN)a-bcX*j?kty4*GKVI(z6XeB?v_X5lC$No5S~g2_820- zmXhrW5x`#GN=tSi$h*>!W+mGGq>9A=O|=>XbtA~}w7I!=>zP+~`A_qwC4;?o?AsvB zze2fGt|dskhScvb=a@*BPC3Z^Q!IP-DP1TrN!}Nt5=DF#NEkdgb?)GD!pV8J_fbna?CdTktd?6bbj?3%* zMAl+<{zvkU${-lUMnf76kx~JTT%unVK?cH0v#%Cni6E=}TY}!OCbRlNvo@IKL* sN8O#55_D>dT>nq2lK(sBFZQhjjj7+oI9#$Pp1+p(50~T*;s5{u literal 0 HcmV?d00001 diff --git a/ej2-asp-core-mvc/barcode/qrcodegenerator.md b/ej2-asp-core-mvc/barcode/qrcodegenerator.md index b16072680b..3cc6a055bd 100644 --- a/ej2-asp-core-mvc/barcode/qrcodegenerator.md +++ b/ej2-asp-core-mvc/barcode/qrcodegenerator.md @@ -88,16 +88,33 @@ The dimension of the QR Code can be changed using the height and width propertie {% endif %} +## Enhancing QR Codes with Icons -## Customizing the text +The EJ2 Barcode Generator allows you to add a [`logo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.QRCodeGenerator.html#Syncfusion_EJ2_BarcodeGenerator_QRCodeGenerator_Logo) or icon to your QR codes, enhancing their visual appeal, clarity, and even security. Adding a recognizable icon can make it easier for users to identify the source and help prevent tampering. -In QR Code generators, you can customize the QR Code text by using display text property. +### Supported Image Sources + +The `imageSource` property of the `QRCodeLogo` class supports the following image sources: + +- **Local image path**: Specify the path to the image file relative to your project's root directory (e.g., `images/syncfusion.png`) or as an absolute path (e.g., `/assets/icons/logo.svg`). +- **Remote image URL**: Provide the web address of the image file (e.g., `https://example.com/image.jpg`). +- **Base64 encoded image data**: Embed the image data directly in the code using a Base64-encoded string (e.g., `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`). + +### Logo Dimensions + +The `width` and `height` properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal scannability. + +**Note:** Always test the scannability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.ErrorCorrectionLevel.html) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability. + +The following image illustrates QR code with logo: + +![logo](images/logo.png) {% if page.publishingplatform == "aspnet-core" %} {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/barcode/qrcode/text/tagHelper %} +{% include code-snippet/barcode/qrcode/logo/tagHelper %} {% endhighlight %} {% endtabs %} @@ -105,10 +122,10 @@ In QR Code generators, you can customize the QR Code text by using display text {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/barcode/qrcode/text/razor %} +{% include code-snippet/barcode/qrcode/logo/razor %} {% endhighlight %} -{% highlight c# tabtitle="Text.cs" %} -{% include code-snippet/barcode/qrcode/text/text.cs %} +{% highlight c# tabtitle="Logo.cs" %} +{% include code-snippet/barcode/qrcode/logo/logo.cs %} {% endhighlight %} {% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/logo.cs b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/logo.cs new file mode 100644 index 0000000000..1374432df9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/logo.cs @@ -0,0 +1,18 @@ +using System.Collections.Generic; +using System.Linq; +using System.Web; +using System.Web.Mvc; +using Syncfusion.EJ2.BarcodeGenerator; + +namespace EJ2CoreSampleBrowser.Controllers.Barcode +{ + public partial class BarcodeController : Controller + { + + public ActionResult qrcode() + { + + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor new file mode 100644 index 0000000000..e36dcdf1fb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor @@ -0,0 +1,6 @@ +@(Html.EJS().QRCodeGenerator("container"). +Width("200px"). +foreColor("red"). +Height("150px"). +logo(s => s.imageSource("https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png")). +Value("SYNCFUSION").Render() ) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper new file mode 100644 index 0000000000..f038bb5214 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper @@ -0,0 +1,3 @@ + + + From 1f2da9ea3c4c2e1466ece2b3e8aba2ca09061358 Mon Sep 17 00:00:00 2001 From: sandhiyanatesh <166396785+sandhiyanatesh@users.noreply.github.com> Date: Fri, 26 Jul 2024 14:23:03 +0530 Subject: [PATCH 2/4] Updated spelling errors --- ej2-asp-core-mvc/barcode/qrcodegenerator.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ej2-asp-core-mvc/barcode/qrcodegenerator.md b/ej2-asp-core-mvc/barcode/qrcodegenerator.md index 3cc6a055bd..080cc2042d 100644 --- a/ej2-asp-core-mvc/barcode/qrcodegenerator.md +++ b/ej2-asp-core-mvc/barcode/qrcodegenerator.md @@ -102,9 +102,9 @@ The `imageSource` property of the `QRCodeLogo` class supports the following imag ### Logo Dimensions -The `width` and `height` properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal scannability. +The `width` and `height` properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability. -**Note:** Always test the scannability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.ErrorCorrectionLevel.html) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability. +**Note:** Always test the readability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.ErrorCorrectionLevel.html) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability. The following image illustrates QR code with logo: @@ -130,4 +130,4 @@ The following image illustrates QR code with logo: {% endtabs %} {% endif %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample). \ No newline at end of file +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample). From 32eb38f7178ade361430ec1fde65f551a5ab48f2 Mon Sep 17 00:00:00 2001 From: sandhiyanatesh <166396785+sandhiyanatesh@users.noreply.github.com> Date: Mon, 29 Jul 2024 13:01:50 +0530 Subject: [PATCH 3/4] Update razor --- ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor index e36dcdf1fb..b47e32b293 100644 --- a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor +++ b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor @@ -1,6 +1,6 @@ @(Html.EJS().QRCodeGenerator("container"). Width("200px"). -foreColor("red"). +mode=("SVG"). Height("150px"). logo(s => s.imageSource("https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png")). -Value("SYNCFUSION").Render() ) \ No newline at end of file +Value("SYNCFUSION").Render() ) From ed1eaa3f244304626ea509e83eae9fff618c2e0f Mon Sep 17 00:00:00 2001 From: sandhiyanatesh <166396785+sandhiyanatesh@users.noreply.github.com> Date: Mon, 29 Jul 2024 13:02:37 +0530 Subject: [PATCH 4/4] Updated changes --- ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper index f038bb5214..4e654b444e 100644 --- a/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper @@ -1,3 +1,3 @@ - +