feat(Chart): support export to image (#3455)

* 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>
dotnetcore · May 8, 2024 · b64f2a4 · b64f2a4
1 parent d2fc6e9
commit b64f2a4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)