.NET中从字节数组生成缩略图并在Razor页展示报错求助

问题背景 #

尝试从DocumentObject类的FileContent字段（JPG/PNG格式的图片字节数组）生成缩略图，在Razor页面展示。核心思路是：获取图片字节数组→生成缩略图字节数组→转换为base64格式的Data URL在前端加载，但运行时出现错误。

当前实现代码 #

Razor页面代码

<QuickGrid Items="@BlobNames">
    <TemplateColumn Title="Thumbnail">
        @{
            var currItem = (context as DocumentObject);
            byte[] thumbnail = GenerateThumbnail(currItem.FileContent);
            var thumbnailUrl = $"data:image/jpeg;base64,{Convert.ToBase64String(thumbnail)}"; 
        }
</QuickGrid>

后端缩略图生成代码

protected byte[] GenerateThumbnail(byte[] imageStream)
{
    using (MemoryStream ms = new MemoryStream(imageStream))
    {
        using (Image originalImage = Image.FromStream(ms))
        {
            using(Image thumbnail = originalImage.GetThumbnailImage(64,64,()=>false, IntPtr.Zero))
            {
                using(MemoryStream thumbnailStream = new MemoryStream())
                {
                    thumbnail.Save(thumbnailStream, originalImage.RawFormat);
                    return thumbnailStream.ToArray();
                }
            }
        }
    }
}

运行错误 #

Unhandled exception rendering component: The type initializer for 'System.Drawing.DrawingCom' threw an exception.
System.TypeInitializationException: The type initializer for 'System.Drawing.DrawingCom' threw an exception.

问题原因 #

1. System.Drawing.Common兼容性问题：该库在.NET Core/.NET 5+版本中仅支持Windows系统，若部署在Linux/macOS环境下，会因缺少GDI+依赖导致初始化失败。
2. GetThumbnailImage方法局限性：该方法对部分图片格式（如大尺寸PNG）支持不佳，容易触发异常。
3. Razor页面缺失图片渲染标签：原代码仅生成了Data URL，但未输出<img>标签，即使逻辑正常也无法在前端显示图片。

解决步骤 #

1. 替换为跨平台图片处理库 #

放弃System.Drawing.Common，使用跨平台的ImageSharp库（支持全平台，无需额外系统依赖）。先安装NuGet包：

Install-Package SixLabors.ImageSharp

2. 重写缩略图生成逻辑 #

用ImageSharp替代原System.Drawing的实现：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Formats;

protected byte[] GenerateThumbnail(byte[] imageBytes)
{
    using (var inputStream = new MemoryStream(imageBytes))
    using (var image = Image.Load(inputStream, out IImageFormat format))
    {
        // 生成等比例缩略图，避免拉伸变形
        image.Mutate(x => x.Resize(new ResizeOptions
        {
            Size = new Size(64, 64),
            Mode = ResizeMode.Max
        }));

        using (var outputStream = new MemoryStream())
        {
            // 按原图片格式保存缩略图
            image.Save(outputStream, format);
            return outputStream.ToArray();
        }
    }
}

3. 修复Razor页面渲染逻辑 #

补充<img>标签，并根据原图片格式设置正确的Data URL类型：

<QuickGrid Items="@BlobNames">
    <TemplateColumn Title="Thumbnail">
        @{
            var currItem = context as DocumentObject;
            byte[] thumbnail = GenerateThumbnail(currItem.FileContent);
            // 根据文件后缀推导MIME类型，或从ImageSharp获取格式信息
            var mimeType = currItem.FileExtension.ToLower() switch
            {
                ".jpg" or ".jpeg" => "image/jpeg",
                ".png" => "image/png",
                _ => "image/jpeg"
            };
            var thumbnailUrl = $"data:{mimeType};base64,{Convert.ToBase64String(thumbnail)}"; 
        }
        <img src="@thumbnailUrl" alt="Thumbnail" style="width:64px;height:64px;object-fit:cover;" />
    </TemplateColumn>
</QuickGrid>

额外注意事项 #

• 若部署在Linux/macOS环境，确保移除System.Drawing.Common的引用，避免兼容性冲突。
• 若DocumentObject没有FileExtension字段，可通过format.DefaultMimeType直接获取图片的标准MIME类型。

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