I am trying to generate a PNG file from HTML. It works when its all text and HTML. However, when try to add an image it only shows a white background.
How can I correctly show the text on the image which I have demonstrated in the HTML below ?
using FastHtmlToPdf.Core;
using FastHtmlToPdf.Core.Model;
using FastHtmlToPdf.Core.Context;
using (var img = new HtmlToImage())
{
string code=@"<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>pinc</title> <style>.mid{position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%);}</style></head><body> <div class='container'> <img src='https://upload.wikimedia.org/wikipedia/commons/c/c5/Polarlicht_2_kmeans_16_large.png' height='500' width='500' alt=''> @TEXT@ </div></body></html>";
code= code.Replace("@TEXT@", somename);
var doc = new ImageDocument
{
Width = 1000,
Height = 800,
Format = FormatEnum.jpg
};
var bytes = img.Convert(doc, code);
MemoryStream ms = new MemoryStream(bytes);
// convert to azure blob and save
var ccl= GetContainerClient("myblob");
var bc= ccl.GetBlobClient("my.jpg");
ms .Position = 0;
Azure.Response<BlobContentInfo> cc = await bc.UploadAsync(ms , true);
ms.Close();
}
Possible issues I assume that might be going on:
Image takes time to load and the JPG is already created. But, I have downloaded the image and made it available in the source code. Still the same result.
I checked if the image has some hidden properties that prevents it from loading, but it doesn't.
