如何在Blazor WASM客户端中将SkiaSharp.SKBitmap渲染为HTML

核心实现逻辑是将SKBitmap编码为浏览器原生支持的图像格式，转换为Data URL后直接绑定到HTML图像标签即可，全程在客户端完成，不需要服务端转发。

前置准备 #

• 先在WASM项目中安装正确的NuGet依赖：
  • SkiaSharp 主库，版本建议2.88.6及以上
  • SkiaSharp.NativeAssets.WebAssembly WASM平台原生资源包，不要误装桌面端/服务端的原生资源包
• 在项目的Program.cs入口处添加一行配置，启用WASM平台的编解码支持：

  SkiaSharp.SKImageInfo.EnableWasmCodecSupport();
  

具体实现步骤 #

• 编写扩展方法完成SKBitmap到HTML可用图像源的转换，注意及时释放非托管资源避免WASM内存泄漏：

  public static class SKBitmapExtensions
  {
      public static string ToHtmlImageSource(this SKBitmap bitmap, SKEncodedImageFormat format = SKEncodedImageFormat.Png, int quality = 100)
      {
          using var image = SKImage.FromBitmap(bitmap);
          using var encodedData = image.Encode(format, quality);
          var base64Str = Convert.ToBase64String(encodedData.Span);
          return format switch
          {
              SKEncodedImageFormat.Png => $"data:image/png;base64,{base64Str}",
              SKEncodedImageFormat.Jpeg => $"data:image/jpeg;base64,{base64Str}",
              SKEncodedImageFormat.Webp => $"data:image/webp;base64,{base64Str}",
              _ => throw new ArgumentOutOfRangeException(nameof(format), "当前指定的图像格式不被浏览器直接支持")
          };
      }
  }
  

• 在Blazor组件中绑定图像源到HTML标签：

  @* Razor模板部分 *@
  @if (!string.IsNullOrEmpty(_renderedImageSrc))
  {
      <img src="@_renderedImageSrc" alt="SkiaSharp渲染位图" style="max-width:100%;" />
  }
  
  @code {
      private string? _renderedImageSrc;
  
      // 位图生成逻辑完成后，调用该方法触发渲染
      private void UpdateRender(SKBitmap generatedBitmap)
      {
          _renderedImageSrc = generatedBitmap.ToHtmlImageSource();
          StateHasChanged();
      }
  }
  

性能优化与踩坑说明 #

• 静态图像场景直接用上述base64方案即可，实现最简单兼容性最好。
• 高频刷新场景（比如实时绘图、动画）不要每次都生成base64字符串，可以通过C#与JS互操作将编码后的图像二进制流直接传给JS侧，通过URL.createObjectURL生成Blob URL绑定到img标签，能减少30%以上的编码耗时，注意URL不用时要调用URL.revokeObjectURL释放内存。
• 不要手动逐像素读取SKBitmap数据写入HTML Canvas，SkiaSharp内置的WASM编解码已经做了SIMD优化，手动操作像素的性能会低数倍。

注意：WASM模式下SkiaSharp无法调用系统原生的图像编解码接口，所有编码操作必须依赖内置的WASM适配实现，否则会抛出原生库加载失败的异常。如果需要保留透明通道，不要选择Jpeg编码格式。

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