使用 HtmlRenderer 将 HTML 转换为图像答案

【问题标题】：Converting HTML to image using HtmlRenderer使用 HtmlRenderer 将 HTML 转换为图像
【发布时间】：2026-02-19 17:30:02
【问题描述】：

我正在尝试使用 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);

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

【问题讨论】：

无论具体问题如何（我在下面提供了答案），都更喜欢使用 HtmlRender.RenderToImage(..) 方法。更好的 API 并正确处理 GDI 文本渲染，请参阅 Generate image from HTML markup。

标签： html c#-4.0

【解决方案1】：

HTML 渲染器目前不支持相对/绝对布局。

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

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

【讨论】：

【解决方案2】：

我不确定使用HtmlRenderer 的html 有多复杂，因此如果有帮助，请提供替代方案。如果 html 真的很复杂并且引用了外部资源，您可以使用 Html 到 Pdf 渲染器，然后将 PDF 转换为图像。

【讨论】：