.NET Core（Razor前端）文本转图片：跨平台替代方案咨询

过去ASP.NET依赖的Bitmap和Graphics.DrawString基于Windows专属的GDI+，在.NET Core跨平台场景下无法通用。推荐使用SkiaSharp——Google开发的跨平台2D图形库，完美适配.NET Core，支持Windows、Linux、Mac等多系统。

步骤1：安装SkiaSharp依赖包 #

在项目中通过NuGet安装必要的包：

Install-Package SkiaSharp
# 若部署到Linux环境，额外安装以下包以处理系统依赖
Install-Package SkiaSharp.NativeAssets.Linux.NoDependencies

步骤2：控制器实现文本转图片逻辑 #

创建API控制器，接收前端传入的字符串，生成PNG/JPEG格式图片并返回：

using Microsoft.AspNetCore.Mvc;
using SkiaSharp;

public class TextToImageController : Controller
{
    [HttpPost]
    public IActionResult Generate([FromForm] string text)
    {
        // 自定义图片尺寸
        int imgWidth = 800;
        int imgHeight = 200;

        // 创建画布与位图
        using var bitmap = new SKBitmap(imgWidth, imgHeight);
        using var canvas = new SKCanvas(bitmap);

        // 填充背景色（白色）
        canvas.Clear(SKColors.White);

        // 配置文本绘制样式
        var textPaint = new SKPaint
        {
            Color = SKColors.DarkSlateGray,
            TextSize = 48,
            IsAntialias = true, // 抗锯齿
            Typeface = SKTypeface.FromFamilyName("Microsoft YaHei"), // 指定字体，跨平台需确保字体存在
            TextAlign = SKTextAlign.Center
        };

        // 计算文本居中位置
        var textBounds = new SKRect();
        textPaint.MeasureText(text, ref textBounds);
        float drawX = imgWidth / 2;
        float drawY = imgHeight / 2 + textBounds.Height / 2;

        // 绘制文本
        canvas.DrawText(text, drawX, drawY, textPaint);

        // 将图片编码为字节数组
        using var image = SKImage.FromBitmap(bitmap);
        using var encodedData = image.Encode(SKEncodedImageFormat.Png, 100); // 可替换为Jpeg，第二个参数为质量（0-100）
        return File(encodedData.ToArray(), "image/png");
    }
}

步骤3：Razor前端调用示例 #

创建Razor页面，实现文本输入、提交并展示生成的图片：

@page
@{
    ViewData["Title"] = "文本转图片工具";
}

<h1>文本转图片</h1>

<div class="mb-3">
    <label for="inputText" class="form-label">输入要转换的文本：</label>
    <input type="text" class="form-control" id="inputText" placeholder="请输入文本" required>
</div>
<button id="generateBtn" class="btn btn-primary">生成图片</button>

<div id="imageDisplay" class="mt-4"></div>

<script>
    document.getElementById('generateBtn').addEventListener('click', async () => {
        const text = document.getElementById('inputText').value.trim();
        if (!text) return;

        const formData = new FormData();
        formData.append('text', text);

        const response = await fetch('/TextToImage/Generate', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            const blob = await response.blob();
            const imgUrl = URL.createObjectURL(blob);
            document.getElementById('imageDisplay').innerHTML = `<img src="${imgUrl}" alt="生成的图片" class="img-fluid">`;
        }
    });
</script>

关键细节说明 #

• 字体适配：跨平台环境下，系统默认字体可能存在差异，可将自定义TTF字体文件放入项目（设置为“复制到输出目录”），通过SKTypeface.FromFile("字体文件路径")加载。
• 格式切换：若需生成JPEG图片，将SKEncodedImageFormat.Png改为SKEncodedImageFormat.Jpeg，同时修改返回的ContentType为image/jpeg。
• 性能优化：批量生成图片时，可复用SKPaint等对象，减少频繁创建销毁带来的性能损耗。

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