899102: UG for QRcode Logo

ej2-asp-core-mvc/barcode/qrcodegenerator.md

@@ -88,29 +88,46 @@ 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 readability.
+
+**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:
+
+![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 %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% 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 %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample).

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();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor

@@ -0,0 +1,6 @@
+@(Html.EJS().QRCodeGenerator("container").
+Width("200px").
+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() )

ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper

@@ -0,0 +1,3 @@
+<ejs-qrcodegenerator id="container" width="200px" height="150px" mode="SVG" value="Syncfusion">
+	<e-qrcodegenerator-logo imageSource="https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png"></e-qrcodegenerator-logo>
+</ejs-qrcodegenerator>