ASP.NET Core Web API中HTML转图片时印地语无法渲染问题

CoreHtmlToImage依赖wkhtmltoimage，印地语文本渲染失败通常和字体加载、编码配置或转换器参数有关，以下是针对性的解决步骤：

1. 内嵌印地语字体到HTML模板 #

wkhtmltoimage不会自动识别系统安装字体，需在HTML中通过@font-face明确引入字体文件，确保转换器能加载到：

修改卡片模板的CSS部分：

<style>
@font-face {
    font-family: 'NotoSansDevanagari';
    src: url('{{FontPath}}') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.name__hindi, .dob {
    font-family: 'NotoSansDevanagari', sans-serif;
    font-size: 16px; /* 避免过小字体渲染异常 */
}
/* 其他原有样式 */
</style>

2. 修正HTML文件读取编码 #

File.ReadAllText默认使用系统编码，需强制指定UTF-8确保印地语文本不丢失：

修改控制器中读取模板的代码：

var htmlContent = System.IO.File.ReadAllText("Static/card-template.html", Encoding.UTF8);

同时添加字体路径替换逻辑（假设字体文件放在wwwroot/Fonts/NotoSansDevanagari-Regular.ttf）：

var fontPath = Path.Combine(_environment.WebRootPath, "Fonts/NotoSansDevanagari-Regular.ttf");

htmlContent = htmlContent.Replace("{{BackgroundImage}}", backImage)
                .Replace("{{FontPath}}", fontPath)
                .Replace("{{Name}}", card.Name)
                .Replace("{{NameInHindi}}", card.NameInHindi)
                .Replace("{{DateOfBirth}}", card.DateOfBirth.ToString("dd/MM/yyyy"));

3. 配置CoreHtmlToImage转换器参数 #

添加wkhtmltoimage的关键参数，确保允许加载本地资源并正确识别字体：

修改图片生成函数：

private async Task<byte[]> GenerateImageAsync(string htmlContent)
{
    var converter = new HtmlConverter();
    // 允许加载本地文件（字体、背景图）
    converter.Options.Add("--enable-local-file-access");
    // 指定字体搜索目录
    var fontDir = Path.Combine(_environment.WebRootPath, "Fonts");
    converter.Options.Add("--font-path", fontDir);
    // 设置DPI避免字体模糊
    converter.Options.Add("--dpi", "96");

    var bytes = converter.FromHtmlString(htmlContent, 700, ImageFormat.Png);
    return bytes;
}

4. 验证印地语文本编码 #

确认从数据库获取的NameInHindi是UTF-8编码的有效字符串，可在控制器中临时输出日志验证：

Console.WriteLine($"印地语姓名：{card.NameInHindi}");

如果输出乱码，需检查数据库字符集（确保使用UTF-8）和实体类字符串属性的配置。

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