Question

我正在尝试使用HtmlRenderer将HTML转换为图像。该页面包含2个图像，其中一个图像位于另一个图像的顶部。我尝试了以下代码

Bitmap m_Bitmap = new Bitmap(700, 900);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(800, 1000);
string html = "<html><head></head><body> Test<div style=\"position: relative; left: 0; top: 0;\"><img style=\"position: relative; top: 0; left: 0;\" src=\"file:///C:/Users/crakhuc/Desktop/HappyBirthday.jpg\"><img style=\"position: absolute; left: 199px; top: 293px;\" src=\"file:///C:/Users/crakhuc/Desktop/Small.jpg\"></div><br></body></html>";
HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap),html,point, maxSize);    
m_Bitmap.Save(@"C:\Test.png", ImageFormat.Png);

问题在于第二张图像不在第一张图像的顶部，而是在第一张图像的底部。

Answer 1

HTML呈现器当前不支持相对/绝对布局。

根据您想要实现的目标，您可以使用其中一个图像作为背景图像，或者使用第一部分中的结果图像将HTML分成两部分作为第2部分渲染的基础。

您可以使用此Wiki页面作为参考：Generate image from HTML markup。

Answer 2

我不确定html使用HtmlRenderer有多复杂，所以如果有帮助就提供替代方案。如果html非常复杂并且引用外部资源，则可以使用Html到Pdf渲染器，然后将PDF转换为图像。

使用HtmlRenderer将HTML转换为图像

2 个答案: