如何在Blazor组件中实例化LogoBuilderService并调用GenerateLogo方法？

1. 修正服务注册问题 #

你在Program.cs中重复注册了LogoBuiderService，先注册为Singleton又注册为Scoped，这会导致最终生效的是最后一次注册的Scoped模式。建议保留一种合适的生命周期，Blazor组件中通常使用Scoped：

// 只保留其中一种，推荐Scoped
builder.Services.AddScoped<LogoBuiderService>();

2. 完善组件的@code部分 #

你已经通过@inject LogoBuiderService logoBuilderService完成了服务的注入，无需手动实例化，直接使用注入的实例即可。以下是完整的@code实现：

@code{
    // 绑定用户输入的文本
    private string LogoText { get; set; } = string.Empty;
    // 绑定用户选择的颜色（格式为#RRGGBB）
    private string LogoColor { get; set; } = "#000000";
    // 存储生成的Logo的Base64字符串
    private string? LogoImage { get; set; }

    // 按钮点击触发的方法
    private void GenerateLogo()
    {
        // 校验输入，避免空文本
        if (string.IsNullOrWhiteSpace(LogoText))
        {
            // 可在此添加错误提示逻辑，比如绑定错误信息显示到页面
            return;
        }

        // 调用服务的GenerateLogo方法，传入文本和颜色参数
        LogoImage = logoBuilderService.GenerateLogo(LogoText, LogoColor);
    }
}

3. 补充优化说明 #

• 如果生成Logo的逻辑耗时较长，建议将服务中的方法改为异步，避免阻塞UI线程：

  // 服务中的异步版本示例
  public async Task<string> GenerateLogoAsync(string text, string color)
  {
      return await Task.Run(() => {
          // 原GenerateLogo方法的完整逻辑
      });
  }
  

  对应的组件方法也要改为异步：

  private async Task GenerateLogo()
  {
      if (string.IsNullOrWhiteSpace(LogoText)) return;
      LogoImage = await logoBuilderService.GenerateLogoAsync(LogoText, LogoColor);
  }
  

• 注意：System.Drawing相关API在Blazor WebAssembly中无法使用（WebAssembly环境无GDI+支持），如果是WebAssembly项目，需要替换为浏览器兼容的图像生成方案，比如使用Canvas API或第三方前端图像库；Blazor Server项目则可正常使用该API。

内容的提问来源于stack exchange，提问作者Saeed Asmani