weiai/BootstrapBlazor
1
0
Fork 0
mirror of https://github.com/dotnetcore/BootstrapBlazor.git synced 2025-12-20 10:26:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Old Li
2024-05-08 17:42:45 +08:00
committed by GitHub
parent d2fc6e9c19
commit b64f2a47ff
4 changed files with 44 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View File

@@ -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" />

2
src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
View File

@@ -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>

6
src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs
View File

@@ -224,4 +224,10 @@ public partial class Chart
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);
}

35
src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
View File

@@ -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)