具有 Graphics.DrawString 的 csharp 中的图形生成呈现不同,具体取决于平台。 (GDI)

Graphics generation in csharp with Graphics.DrawString renders different, depending on platform. (GDI)

对于内置于 ASP.Net Core 的比利时体育社区项目,我正在使用 C# 动态渲染图像。该图像基于“基本图片”,其中我动态添加文本,然后 return 将图像发送到客户端。

效果很好,我对结果很满意。

但是,当我比较客户端生成的图像时,在我的开发环境(即 MacOS)上,与我的生产环境(Azure 中的 Linux 虚拟机)相比,该图像渲染得更漂亮平台)。

作为对比,你可以看两张图,看文字就知道区别了。在第二张图片中,文本字符串看起来更加像素化。

我能做些什么来避免这种情况吗?这可能与 GPU 的(不)可用性或类似问题有关吗?

欢迎任何见解。

(我还向我的项目添加了 Nuget 包 runtime.osx.10.10-x64.CoreCompat.System.Drawing,这是在我的 MacOS 上 运行 成功所必需的)

供参考:相关代码片段:

public async Task<byte[]> CreateImageAsync(YearReview summary)
{
    var fonts = new PrivateFontCollection();
    fonts.AddFontFile(Path.Combine(_hostingEnvironment.WebRootPath, "fonts/bold.ttf"));
    fonts.AddFontFile(Path.Combine(_hostingEnvironment.WebRootPath, "fonts/light.otf"));
    var boldFont = fonts.Families[0];
    var lightFont = fonts.Families[1];

    var assembly = Assembly.GetAssembly(typeof(YearImageGenerator));
    var resourceName = "CotacolApp.StaticData.year-a.png";
    // Leaving out some variable/constants, irrelevant to the sample
    await using (var stream = assembly.GetManifestResourceStream(resourceName))
    {
        var bitmap = new Bitmap(stream);
        using (var gfx = Graphics.FromImage(bitmap))
        {
                using (Font f = new Font(boldFont, 58, FontStyle.Bold, GraphicsUnit.Pixel))
                {
                    gfx.DrawString($"{summary?.UniqueColsInYear.Number()}", f, Brushes.Black,
                        new RectangleF(0, startHeightYear, yearValuesRightBorder, 100f), rightAlignFormat);
                }
        }

        using (var imgStream = new MemoryStream())
        {
            bitmap.Save(imgStream, System.Drawing.Imaging.ImageFormat.Png);
            return imgStream.ToArray();
        }
    }
}

对比图片的话,看左边黑色的数字,右边黑色的文字。

图片,在开发环境 (MacOS) 上渲染:

图片,在 Azure 云中呈现:

不要使用System.Drawing。 Microsoft 本身对此发出警告 in the documentation。它存在于 .NET Core 中只是为了兼容性

In .NET 6 and later versions, the System.Drawing.Common package, which includes this type, is only supported on Windows operating systems. Use of this type in cross-platform apps causes compile-time warnings and run-time exceptions. For more information, see System.Drawing.Common only supported on Windows.

链接的文章解释了错误并提供了几个跨平台的替代方案,例如 ImageSharp and SkiaSharp

System.Drawing 的主要工作是在屏幕上绘制 UI,而不是处理图像。在 Windows 上,它只是 GDI+ 的一个非常薄的包装器。等效的跨平台技术是MAUI,尚未发布

ImageSharp 中的等效代码可能是:

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.Fonts;
...
//Load the fonts
FontCollection fonts = new FontCollection();
var boldPath = Path.Combine(_hostingEnvironment.WebRootPath, "fonts/bold.ttf");
var lightPath = Path.Combine(_hostingEnvironment.WebRootPath, "fonts/light.ttf");
var boldFont = fonts.Install(boldPath);
var lightFont = fonts.Install(lightPath);

//Load the image
var image = await Image.LoadAsync(stream);

//Draw the text
string yourText = $"{summary?.UniqueColsInYear.Number()}";

Font font = boldFont.CreateFont(58, FontStyle.Bold);

DrawingOptions options = new DrawingOptions()
{
    TextOptions = new TextOptions
    {
        WrapTextWidth = yearValuesRightBorder,
        HorizontalAlignment = HorizontalAlignment.Right
    }
};

var point = PointF(0, startHeightYear);
image.Mutate(x => x.DrawText(options, yourText, font, Color.Black, point));

//Save as PNG to a buffer
using var ms = new MemoryStream();
await image.SaveAsPngAsync(ms);
return ms.ToArray();

您可以查看 Getting Started section in the docs. SaveAsPngAsync is a convenience extension method. Drawing Text shows how to draw text on the image and the Fonts 部分显示如何处理字体。