From b64f2a47ff5e7132007e7c715353680aa6bd3eab Mon Sep 17 00:00:00 2001
From: Old Li <33386249+azlis@users.noreply.github.com>
Date: Wed, 8 May 2024 17:42:45 +0800
Subject: [PATCH] feat(Chart): support export to image (#3455)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added ToImage method and supporting JS functions

* doc: 文档格式化

* chore: bump version 8.1.1

* chore: 更新依赖包到最新

* chore: 8.1.2

* chore: 更新 Chart 包

---------

Co-authored-by: Argo-AscioTech <argo@live.ca>
---
 .../BootstrapBlazor.Server.csproj             |  4 +--
 .../BootstrapBlazor.Chart.csproj              |  2 +-
 .../Components/Chart/Chart.razor.cs           |  6 ++++
 .../Components/Chart/Chart.razor.js           | 35 +++++++++++++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index fb4355b15c5..8cbcd0fa8df 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -34,7 +34,7 @@
     <PackageReference Include="BootstrapBlazor.Bluetooth" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon.Extensions" Version="8.0.3" />
-    <PackageReference Include="BootstrapBlazor.Chart" Version="8.1.0" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="8.1.2" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.3" />
@@ -59,7 +59,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="8.0.3" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="8.1.0" />
     <PackageReference Include="BootstrapBlazor.TagHelper" Version="8.0.1" />
-    <PackageReference Include="BootstrapBlazor.Topology" Version="8.0.5" />
+    <PackageReference Include="BootstrapBlazor.Topology" Version="8.0.6" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="8.0.7-beta1" />
     <PackageReference Include="BootstrapBlazor.WebAPI" Version="8.0.5" />
     <PackageReference Include="Longbow.Logging" Version="8.0.0" />
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj b/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
index ef0f9a1d981..957e773e077 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.1.0</Version>
+    <Version>8.1.2</Version>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Chart</PackageTags>
     <Description>Bootstrap UI components extensions of Chart.js</Description>
   </PropertyGroup>
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs
index 29080ce9dbd..fc971f6903e 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs
@@ -224,4 +224,10 @@ private void UpdateOptions(ChartDataSource ds)
         ds.Options.OnClickDataMethod = OnClickDataAsync == null ? null : nameof(OnClickCallback);
         ds.Type ??= ChartType.ToDescriptionString();
     }
+
+    /// <summary>
+    /// 生成图片方法
+    /// </summary>
+    /// <returns></returns>
+    public Task<byte[]?> ToImageAsync(string mimeType = "image/png") => InvokeAsync<byte[]?>("toImage", Id, mimeType);
 }
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
index a39c2df5435..29cc084cdbd 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
@@ -412,6 +412,41 @@ export function update(id, option, method, angle) {
     chart.update()
 }
 
+function canvasToBlob(canvas, mimeType) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob(blob => {
+            var reader = new FileReader();
+            reader.onload = function (event) {
+                var byteArray = new Uint8Array(event.target.result);
+                resolve(byteArray);
+            };
+            reader.onerror = () => reject(new Error('Failed to read blob as array buffer'));
+            reader.readAsArrayBuffer(blob);
+        }, mimeType);
+    });
+}
+
+export function toImage(id, mimeType) {
+    return new Promise(async (resolve, reject) => {
+        var div = document.getElementById(id);
+        if (div) {
+            var canvas = div.querySelector('canvas');
+            if (canvas) {
+                try {
+                    const blobArray = await canvasToBlob(canvas, mimeType);
+                    resolve(blobArray);
+                } catch (error) {
+                    reject(error);
+                }
+            } else {
+                reject(new Error('No canvas found'));
+            }
+        } else {
+            reject(new Error('No element with given id found'));
+        }
+    });
+}
+
 export function dispose(id) {
     const chart = Data.get(id)
     Data.remove(id)