feat(Dom2Image): add IDom2ImageService interface

BootstrapBlazor.Extensions.slnx

@@ -29,6 +29,7 @@
     <Project Path="src/components/BootstrapBlazor.CodeEditor/BootstrapBlazor.CodeEditor.csproj" />
     <Project Path="src/components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj" />
     <Project Path="src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj" />
+    <Project Path="src/components/BootstrapBlazor.Dom2Image/BootstrapBlazor.Dom2Image.csproj" />
     <Project Path="src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj" />
     <Project Path="src/components/BootstrapBlazor.ElementIcon/BootstrapBlazor.ElementIcon.csproj" />
     <Project Path="src/components/BootstrapBlazor.FileSystem/BootstrapBlazor.FileSystem.csproj" />

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

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>10.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>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </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 BootstrapBlazorDom2ImageServiceExtensions
+{
+    /// <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
+        });
+    }
+}