I am generating a card and downloading using api. One can enter a card number and card is generated and downloaded. But the card contains some hindi texts which is not rendering correctly in the downloaded image.
I am using CoreHtmlToImage package
Here is controller function:
[HttpPost("/card/download")]
public async Task<IActionResult> DownloadCard([FromForm]string CardNumber)
{
if (CardNumber == null) return BadRequest("Card Number cannot be empty");
try
{
var card = await _repository.GetCard(CardNumber);
if (card == null) return BadRequest("Card not found");
var backImage = Path.Combine(_environment.WebRootPath, "Images/", "card-template.png");
var htmlContent = System.IO.File.ReadAllText("Static/card-template.html");
htmlContent = htmlContent.Replace("{{BackgroundImage}}", backImage)
.Replace("{{Name}}", card.Name)
.Replace("{{NameInHindi}}", card.NameInHindi)
.Replace("{{DateOfBirth}}", card.DateOfBirth.ToString("dd/MM/yyyy"));
var image = await GenerateImageAsync(htmlContent);
return File(image, "image/png", $"Card_{card.CardNumber}.png");
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
This is the image generation function
private async Task<byte[]> GenerateImageAsync(string htmlContent)
{
var converter = new HtmlConverter();
var bytes = converter.FromHtmlString(htmlContent, 700, ImageFormat.Png);
return bytes;
}
This is card template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<style></style>
</head>
<body class="card__body">
<div class="main__container">
<img class="img" src="{{BackgroundImage}}" alt="">
<div class="main__wrapper">
<div class="user__details">
<p class="name__hindi">{{NameInHindi}}</p>
<p class="name__english">{{Name}}</p>
<p class="dob">जन्म तिथि / DOB : {{DateOfBirth}}</p>
</div>
</div>
<h1>{{CardNumber}}</h1>
</div>
</body>
</html>
I did try to use some hindi fonts and link in the css part but it didn.t work. I also tried to download hindi font and installed in my system, but it also didn't work.
<meta charset="UTF-8">should solve the issue, but you already had it in your html content. Could you pls debug your code and check the html content for variablestring htmlContent?File.WriteAllText(text, htmlContent);doesn't setEncoding.UTF8in the parameter, but it's provded I'm wrong. But if I remove the<meta charset="UTF-8">within the html string, the jpg file will display as other words instead of black square. I'm afraid the root cause is the wkhtmltoimage.exe doesn't support Hindi words. Because when I used Chinese words, it worked. i.sstatic.net/rD8pzdkZ.png