Fazil
Fazil

Reputation: 21

Converting HTML to image using HtmlRenderer

I am trying to convert HTML to image using HtmlRenderer. The page contains 2 images, where one image is on the top of the other. I tried following code

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);

Problem with this is that second image doesn't come on top of the first but comes at bottom of first image.

Upvotes: 1

Views: 8937

Answers (2)

Mark Redman
Mark Redman

Reputation: 24515

I am not sure how complex the html can be using HtmlRenderer so providing an alternative if it helps. If the html is really complex and references external resources, you could use a Html to Pdf renderer then convert the PDF to an image.

Upvotes: 0

Arthur
Arthur

Reputation: 1548

HTML Renderer currently doesn't support relative/absolute layout.

Depending on what you want to achieve you can either use one of the images as background image, or split the HTML into 2 parts using the resulted image from part one as the base for part 2 rendering.

You can use this wiki page for reference: Generate image from HTML markup.

Upvotes: 1

Related Questions