在 HTML 上显示图像并转换为 JPG

Question

I am trying to generate a PNG file from HTML.我正在尝试从 HTML 生成一个 PNG 文件。 It works when its all text and HTML.它在所有文本和 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 ?如何正确显示我在下面的 HTML 中演示的图像上的文本？

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.图像加载需要时间并且 JPG 已经创建。 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.我检查了图像是否有一些阻止它加载的隐藏属性，但它没有。

Answer 1

I converted the image to base64.我将图像转换为 base64。 instead of displaying the image as <img src='https://upload.wikimedia.org/wikipedia/commons/c/c5/Polarlicht_2_kmeans_16_large.png' height='500' width='500' alt=''> , I included the base64 code in the SRC block.而不是将图像显示为<img src='https://upload.wikimedia.org/wikipedia/commons/c/c5/Polarlicht_2_kmeans_16_large.png' height='500' width='500' alt=''> ，我在 SRC 块中包含 base64 代码。

There are many ways to generate image but I used the following tool to generate it.有很多方法可以生成图像，但我使用以下工具来生成它。 https://www.base64-image.de/ https://www.base64-image.de/

在 HTML 上显示图像并转换为 JPG

问题描述

1 个解决方案

解决方案1
0 2021-11-03 18:45:34

在 HTML 上显示图像并转换为 JPG

问题描述

1 个解决方案

解决方案1 0 2021-11-03 18:45:34

解决方案1
0 2021-11-03 18:45:34