feat(Dom2Image): add IDom2ImageService interface

BootstrapBlazor.Extensions.sln

@@ -202,6 +202,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "UnitTestOpcDa", "test\UnitT
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Tasks.Dashboard", "src\components\BootstrapBlazor.Tasks.Dashboard\BootstrapBlazor.Tasks.Dashboard.csproj", "{30C57119-C564-401C-AE3A-6203E2733E1A}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Dom2Image", "src\components\BootstrapBlazor.Dom2Image\BootstrapBlazor.Dom2Image.csproj", "{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -552,6 +554,10 @@ Global
 		{30C57119-C564-401C-AE3A-6203E2733E1A}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{30C57119-C564-401C-AE3A-6203E2733E1A}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{30C57119-C564-401C-AE3A-6203E2733E1A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -647,6 +653,7 @@ Global
 		{01007B10-7C3C-4136-83FF-981CA39AD3D4} = {7B29E81D-92DE-46C8-8EDC-1B48C8F12BC2}
 		{835C8BA9-A9CC-4EA0-9002-34A20F8B2E86} = {B6A98ADE-D26A-4D0B-8978-AB7AC915F5AE}
 		{30C57119-C564-401C-AE3A-6203E2733E1A} = {FF1089BE-C704-4374-B629-C57C08E1798F}
+		{B7923D29-96EC-4C9D-8180-8B2F45E1D2F9} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF}

src/components/BootstrapBlazor.Dom2Image/BootstrapBlazor.Dom2Image.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>9.0.0</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Dom Image</PackageTags>
+    <Description>Bootstrap UI components extensions of DomToImage use snapDom lib</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Content Remove="wwwroot\lib\snapdom.mjs"/>
+    <None Include="wwwroot\lib\snapdom.mjs"/>
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="9.0.0"/>
+  </ItemGroup>
+
+</Project>

src/components/BootstrapBlazor.Dom2Image/Extensions/ServiceCollectionExtensions.cs

@@ -0,0 +1,26 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+
+namespace Microsoft.Extensions.DependencyInjection;
+
+/// <summary>
+/// BootstrapBlazor 服务扩展类
+/// </summary>
+public static class BootstrapBlazorHtml2PdfServiceExtensions
+{
+    /// <summary>
+    /// 添加 AzureOpenAIService 服务
+    /// </summary>
+    /// <param name="services"></param>
+    public static IServiceCollection AddBootstrapBlazorDom2ImageService(this IServiceCollection services)
+    {
+        services.AddScoped<IDom2ImageService, DefaultDom2ImageService>();
+#if NET8_0_OR_GREATER
+        services.AddKeyedScoped<IDom2ImageService, DefaultDom2ImageService>("BootstrapBlazor.Dom2Image");
+#endif
+        return services;
+    }
+}

src/components/BootstrapBlazor.Dom2Image/Services/DefaultDom2ImageService.cs

@@ -0,0 +1,85 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.Extensions.Logging;
+using Microsoft.JSInterop;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 默认 Html to Image 实现
+/// <param name="runtime"></param>
+/// <param name="logger"></param>
+/// </summary>
+class DefaultDom2ImageService(IJSRuntime runtime, ILogger<DefaultDom2ImageService> logger) : IDom2ImageService
+{
+    private JSModule? _jsModule;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public async Task<string?> GetUrlAsync(string selector, Dom2ImageOptions? options = null, CancellationToken token = default)
+    {
+        string? data = null;
+        try
+        {
+            _jsModule ??= await LoadModule();
+            data = await _jsModule.InvokeAsync<string?>("getUrl", token, selector, options);
+        }
+        catch (OperationCanceledException) { }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "{GetUrlAsync} throw exception: {ex}", nameof(GetUrlAsync), ex.Format());
+        }
+        return data;
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public async Task<Stream?> GetStreamAsync(string selector, Dom2ImageOptions? options = null, CancellationToken token = default)
+    {
+        Stream? data = null;
+        try
+        {
+            _jsModule ??= await LoadModule();
+            var streamReference = await _jsModule.InvokeAsync<IJSStreamReference?>("getStream", selector, options);
+            if (streamReference != null)
+            {
+                data = await streamReference.OpenReadStreamAsync(streamReference.Length, token);
+            }
+        }
+        catch (OperationCanceledException) { }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "{GetStreamAsync} throw exception: {ex}", nameof(GetStreamAsync), ex.Format());
+        }
+        return data;
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="fileName"></param>
+    /// <param name="format"></param>
+    /// <param name="backgroundColor"></param>
+    /// <param name="options"></param>
+    /// <returns></returns>
+    public async Task DownloadAsync(string selector, string fileName = "capture", string? format = "png", string? backgroundColor = null, Dom2ImageOptions? options = null)
+    {
+        try
+        {
+            _jsModule ??= await LoadModule();
+            await _jsModule.InvokeAsync<IJSStreamReference?>("downloadAsync", selector, fileName, format, backgroundColor, options);
+        }
+        catch (OperationCanceledException) { }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "{DownloadAsync} throw exception: {ex}", nameof(DownloadAsync), ex.Format());
+        }
+    }
+
+    private Task<JSModule> LoadModule() => runtime.LoadModule("./_content/BootstrapBlazor.Dom2Image/dom2image.js");
+}

src/components/BootstrapBlazor.Dom2Image/Services/Dom2ImageOptions.cs

@@ -0,0 +1,86 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+using System.Text.Json.Serialization;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Dom2ImageOptions 选项类
+/// </summary>
+public class Dom2ImageOptions
+{
+    /// <summary>
+    /// Removes redundant styles. Default value is true
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public bool? Compress { get; set; }
+
+    /// <summary>
+    /// Skips idle delay for faster results. Default value is true
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public bool? Fast { get; set; }
+
+    /// <summary>
+    /// Inlines fonts (icon fonts always embedded). Default value is false
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public bool? EmbedFonts { get; set; }
+
+    /// <summary>
+    /// Output scale multiplier. Default value is 1
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public int? Scale { get; set; }
+
+    /// <summary>
+    /// Device pixel ratio
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public int? Dpr { get; set; }
+
+    /// <summary>
+    /// Output specific width size
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public int? Width { get; set; }
+
+    /// <summary>
+    /// Output specific height size
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public int? Height { get; set; }
+
+    /// <summary>
+    /// Fallback color for JPG/WebP. Default value is #fff
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? BackgroundColor { get; set; }
+
+    /// <summary>
+    /// Quality for JPG/WebP (0 to 1)
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public float? Quality { get; set; }
+
+    /// <summary>
+    /// Select png, jpg, webp Blob type. Default value is svg
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Type { get; set; }
+
+    /// <summary>
+    /// CSS selectors for elements to exclude
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string[]? Exclude { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string[]? LocalFonts { get; set; }
+}

src/components/BootstrapBlazor.Dom2Image/Services/IDom2ImageService.cs

@@ -0,0 +1,40 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// IDom2ImageService 接口定义
+/// </summary>
+public interface IDom2ImageService
+{
+    /// <summary>
+    /// 通过指定选择器获得 Html 元素返回图片数据
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="options"></param>
+    /// <param name="token"></param>
+    /// <returns></returns>
+    Task<string?> GetUrlAsync(string selector, Dom2ImageOptions? options = null, CancellationToken token = default);
+
+    /// <summary>
+    /// 通过指定选择器获得 Html 元素返回图片数据流
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="options"></param>
+    /// <param name="token"></param>
+    /// <returns></returns>
+    Task<Stream?> GetStreamAsync(string selector, Dom2ImageOptions? options = null, CancellationToken token = default);
+
+    /// <summary>
+    /// 通过指定选择器下载 Html 元素图片
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <param name="fileName"></param>
+    /// <param name="format"></param>
+    /// <param name="backgroundColor"></param>
+    /// <param name="options"></param>
+    /// <returns></returns>
+    Task DownloadAsync(string selector, string fileName = "capture", string? format = "png", string? backgroundColor = null, Dom2ImageOptions? options = null);
+}

src/components/BootstrapBlazor.Dom2Image/wwwroot/dom2image.js

@@ -0,0 +1,33 @@
+import { snapdom } from './lib/snapdom.min.mjs'
+
+export async function getUrl(selector, options = {}) {
+    let data = null;
+    const el = document.querySelector(selector);
+    if (el) {
+        const result = await snapdom(el, options);
+        data = result.url;
+    }
+    return data;
+}
+
+export async function getStream(selector, options = {}) {
+    let data = null;
+    const el = document.querySelector(selector);
+    if (el) {
+        const result = await snapdom(el, options);
+        data = result.toBlob();
+    }
+    return data;
+}
+
+export async function downloadAsync(selector, filename, format, backgroundColor, options) {
+    const el = document.querySelector(selector);
+    if (el) {
+        const result = await snapdom(el, options);
+        await result.download({
+            format,
+            filename,
+            backgroundColor
+        });
+    }
+}