From 87a1932049895e1887c3d38057c2a3b2aadd0b2b Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 8 Nov 2024 17:52:45 +0200 Subject: [PATCH 1/4] docs(qrcode): Add KB for Barcode, QRCode and Chart export to image --- components/barcodes/barcode/overview.md | 5 +- components/barcodes/qrcode/overview.md | 3 +- .../qrcode-barcode-chart-export-to-image.md | 263 ++++++++++++++++++ 3 files changed, 268 insertions(+), 3 deletions(-) create mode 100644 knowledge-base/qrcode-barcode-chart-export-to-image.md diff --git a/components/barcodes/barcode/overview.md b/components/barcodes/barcode/overview.md index 497db50dfc..e9a8002fd7 100644 --- a/components/barcodes/barcode/overview.md +++ b/components/barcodes/barcode/overview.md @@ -133,5 +133,6 @@ The nested `BarcodePadding` tag exposes parameters that enable you to customize ## See Also - * [Live Demo: Barcode](https://demos.telerik.com/blazor-ui/barcode/overview) - * [Live Demo: Barcode Encoding](https://demos.telerik.com/blazor-ui/barcode/encodings) \ No newline at end of file +* [Live Demo: Barcode](https://demos.telerik.com/blazor-ui/barcode/overview) +* [Live Demo: Barcode Encoding](https://demos.telerik.com/blazor-ui/barcode/encodings) +* [Export Barcode to Image]({%slug qrcode-barcode-chart-kb-export-to-image%}) diff --git a/components/barcodes/qrcode/overview.md b/components/barcodes/qrcode/overview.md index 7fa7f3c48d..6145e053a7 100644 --- a/components/barcodes/qrcode/overview.md +++ b/components/barcodes/qrcode/overview.md @@ -94,4 +94,5 @@ The nested `QRCodeBorder` tag exposes parameters that enable you to customize th ## See Also - * [Live Demo: QRCode](https://demos.telerik.com/blazor-ui/qrcode/overview) +* [Live Demo: QRCode](https://demos.telerik.com/blazor-ui/qrcode/overview) +* [Export QRCode to Image]({%slug qrcode-barcode-chart-kb-export-to-image%}) diff --git a/knowledge-base/qrcode-barcode-chart-export-to-image.md b/knowledge-base/qrcode-barcode-chart-export-to-image.md new file mode 100644 index 0000000000..5ae23d3e7c --- /dev/null +++ b/knowledge-base/qrcode-barcode-chart-export-to-image.md @@ -0,0 +1,263 @@ +--- +title: Export QRCode, Barcode, or Chart to Image +description: Learn how to convert and export a Telerik Blazor QRCode, Barcode, or Chart to an image and send it to the .NET runtime. +type: how-to +page_title: How to Export Telerik QRCode, Barcode, or Chart to Image +slug: qrcode-barcode-chart-kb-export-to-image +tags: telerik, blazor, qrcode, barcode, chart +ticketid: 1572189, 1588186, 1667798 +res_type: kb +--- + +## Environment + + + + + + + + +
Product + QRCode for Blazor,
+ Barcode for Blazor,
+ Chart for Blazor +
+ +## Description + +This KB answers the following questions: + +* How to export a generated QRCode to a PNG or JPG image for saving on the server or download? +* How to create an image from the Telerik QRCode for Blazor? +* How to convert a Barcode, Chart, or QRCode from SVG to an image? +* How to save a Barcode or QRCode as an image? + +## Solution + +Use `JSInterop` and JavaScript APIs to convert the Telerik component to a Base64 string and send it to the server. + +When using the `Canvas` `RenderingMode` of the Telerik component (Barcode, Chart, QRCode), use the [`toDataURL`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) method of the `canvas` HTML element to obtain a Base64 data URI for the image. + +When using the `SVG` rendering mode: + +1. Use an [`XMLSerializer`](https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer) to create an image [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob). +1. Create a `canvas` element and [get its 2D context](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext). +1. [Draw the image](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) into the `canvas` element. +1. Use the [`toDataURL`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) method of the `canvas` HTML element to obtain a Base64 data URI for the image. + +> When using a Blazor app with **Server** render mode, make sure to [increase the SignalR max message size]({%slug common-kb-increase-signalr-max-message-size%}), otherwise the Base64 data URI may not reach the .NET runtime. + +>caption Export QRCode, BarCode or Chart to Image + +````CSHTML +@inject IJSRuntime js + + + + Use SVG + + + Use Canvas + + + +Export to PNG + +
+
+

@RenderingMode QR Code

+ + + + @if (!string.IsNullOrEmpty(QrImageDataUrl)) + { +

QR Code PNG

+ PNG from QR Code + } + +
+
+

@RenderingMode Chart

+ + + + + + + + + + + + + + + + + + + + + + @if (!string.IsNullOrEmpty(ChartImageDataUrl)) + { +

Chart PNG

+ PNG from Chart + } +
+
+ +@* Move JavaScript code to a separate JS file *@ + + +@code { + #nullable enable + + private RenderingMode RenderingMode { get; set; } = RenderingMode.SVG; + + private string QrImageDataUrl { get; set; } = string.Empty; + private string ChartImageDataUrl { get; set; } = string.Empty; + + private List SeriesData1 { get; set; } = new(); + private List SeriesData2 { get; set; } = new(); + + private async Task OnQrCodeExportButtonClick() + { + string jsFunctionName = RenderingMode == RenderingMode.SVG ? "getImageFromSvg" : "getImageFromCanvas"; + + QrImageDataUrl = await js.InvokeAsync(jsFunctionName, ".exportable-qrcode"); + ChartImageDataUrl = await js.InvokeAsync(jsFunctionName, ".exportable-chart"); + } + + private void ToggleRenderingMode(RenderingMode newMode) + { + RenderingMode = newMode; + + QrImageDataUrl = ChartImageDataUrl = string.Empty; + } + + #region Data Generation + + protected override async Task OnInitializedAsync() + { + var now = DateTime.Today; + var monthsBack = 6; + + for (int i = 1; i <= monthsBack; i++) + { + var dateTimeValue = now.AddMonths(-monthsBack + i); + + SeriesData1.Add(new ChartModel() + { + Id = i, + Product = "Product 1", + Revenue = Random.Shared.Next(1, 900), + TimePeriod = dateTimeValue + }); + + SeriesData2.Add(new ChartModel() + { + Id = i, + Product = "Product 2", + Revenue = Random.Shared.Next(1, 900), + TimePeriod = dateTimeValue + }); + } + + await base.OnInitializedAsync(); + } + + public class ChartModel + { + public int Id { get; set; } + public string Product { get; set; } = string.Empty; + public DateTime TimePeriod { get; set; } + public decimal Revenue { get; set; } + } + + #endregion Data Generation +} +```` + +> The example in this KB article demonstrates non-Telerik JavaScript APIs, which are not subject to Telerik technical support. + +## See Also + +* [Barcode Overview]({%slug barcode-overview%}) +* [Chart Overview]({%slug components/chart/overview%}) +* [QRCore Overview]({%slug qrcode-overview%}) From 958dca53b26b88218a19e081bb96b6be774ffa57 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 8 Nov 2024 17:54:13 +0200 Subject: [PATCH 2/4] Update knowledge-base/qrcode-barcode-chart-export-to-image.md --- knowledge-base/qrcode-barcode-chart-export-to-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/qrcode-barcode-chart-export-to-image.md b/knowledge-base/qrcode-barcode-chart-export-to-image.md index 5ae23d3e7c..afef1c01bc 100644 --- a/knowledge-base/qrcode-barcode-chart-export-to-image.md +++ b/knowledge-base/qrcode-barcode-chart-export-to-image.md @@ -254,7 +254,7 @@ When using the `SVG` rendering mode: } ```` -> The example in this KB article demonstrates non-Telerik JavaScript APIs, which are not subject to Telerik technical support. +> The example in this KB article demonstrates JavaScript APIs, which are not subject to Telerik technical support. ## See Also From 9a4daa1d51673128e89e9c1399b227023eab36b2 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:56:17 +0200 Subject: [PATCH 3/4] Update knowledge-base/qrcode-barcode-chart-export-to-image.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/qrcode-barcode-chart-export-to-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/qrcode-barcode-chart-export-to-image.md b/knowledge-base/qrcode-barcode-chart-export-to-image.md index afef1c01bc..e9277b7a70 100644 --- a/knowledge-base/qrcode-barcode-chart-export-to-image.md +++ b/knowledge-base/qrcode-barcode-chart-export-to-image.md @@ -48,7 +48,7 @@ When using the `SVG` rendering mode: > When using a Blazor app with **Server** render mode, make sure to [increase the SignalR max message size]({%slug common-kb-increase-signalr-max-message-size%}), otherwise the Base64 data URI may not reach the .NET runtime. ->caption Export QRCode, BarCode or Chart to Image +>caption Export QRCode, BarCode, or Chart to Image ````CSHTML @inject IJSRuntime js From 7a9f1b7949a0252b941cb59c47069f3db4507b44 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:57:01 +0200 Subject: [PATCH 4/4] Update knowledge-base/qrcode-barcode-chart-export-to-image.md --- knowledge-base/qrcode-barcode-chart-export-to-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/qrcode-barcode-chart-export-to-image.md b/knowledge-base/qrcode-barcode-chart-export-to-image.md index e9277b7a70..105066838a 100644 --- a/knowledge-base/qrcode-barcode-chart-export-to-image.md +++ b/knowledge-base/qrcode-barcode-chart-export-to-image.md @@ -50,7 +50,7 @@ When using the `SVG` rendering mode: >caption Export QRCode, BarCode, or Chart to Image -````CSHTML +````RAZOR @inject IJSRuntime js