the image is just black

Oct 3, 2013 at 12:08 PM
When I tried htmlrenderer with the following code to render html as an image, it does not render the html, but just show a black image.
Bitmap m_Bitmap = new Bitmap(1000, 682);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(674, 690);

HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap), htmlMessage, point, maxSize); // htmlMessage is html string with background-url 

m_Bitmap.Save(stream, ImageFormat.Jpeg);
                                        
stream.Seek(0, SeekOrigin.Begin); 
 
                                        
byte[] data = new byte[stream.Length];
                                        
stream.Read(data, 0, ConvertSafe.ToInt32(stream.Length, 0));
after this piece of code I got the stream and save as a jpg file. When I try to open it as I just stated before it is a whole black image.
Developer
Oct 4, 2013 at 10:15 AM
Edited Oct 4, 2013 at 10:16 AM
Working with jpeg is different, I don't know how to make jpeg work but it's not HTML Renderer issue.
If you use png image format it will work.
Oct 4, 2013 at 11:20 AM
Thank you so much for your help,

I updated the content type to the png format, but now the background-url does not show. What can I do to solve the problem ? Also, It is possible use URL to get html of it, if yes how I can do it ? İf you can help me I will be so appreciated.
Developer
Oct 4, 2013 at 12:16 PM
For image generation you can't provide URI as image source it can either be a file path or provided manually with ImageLoad event (you will have to use HtmlContainer directly).

I don't understand the question regarding getting html of an uri.
Dec 4, 2013 at 12:08 PM
Edited Dec 4, 2013 at 12:42 PM
Hello ArthurTep,

I did what you said in the post above, but still the background image can not be seen correctly. The code I wrote and the result are below. No matter what I tried, I could not load the bottom part of image. The original image for background-url is also below.

Thank you so much again for your help.
MemoryStream stream = new MemoryStream();
Bitmap m_Bitmap = new Bitmap(755, 461);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(755, 461);
string path = " C://Users//venus//Desktop//6.jpg";

sertifikaMesaji = "<html><body style=\"background-image:url(" + path + ");height:240px;background-repeat:no-repeat;background-size:755px 460px;\"><h1 style=\" margin-top:40px;margin-left:150px;\">" 
+  "<span style=\"font-family:Monotype Corsiva;\"><em>Test HTML</em></span></h1><div style=\"width:560px;height:200px;margin-top:120px;margin-right:55px;margin-left:150px;\"><em>" 
+ "<span style=\"font-family:Monotype Corsiva;\"><span style=\"font-size:22px;\">Some Text Here</span></span></em></div></body></html>"; 

HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap), sertifikaMesaji, point, maxSize); // sertifikaMesaji is html string with background-url 
m_Bitmap.Save(stream, ImageFormat.Png);
stream.Seek(0, SeekOrigin.Begin);
byte[] data = new byte[stream.Length];
stream.Read(data, 0, ConvertSafe.ToInt32(stream.Length, 0));
The result :
Image

The original image:
Image
Developer
Dec 5, 2013 at 9:54 AM
I changed your code a little and the result is almost perfect, I think there is a bug where the height of the body is not respected, will check it in a few days.
Note, I have added "margin: 0px; height: 461px;" to body style and used "HtmlRender.RenderToImage" method.
Size maxSize = new Size(755, 461);
string path = " D://OriginalImage.png";
string newPath = "D://NewImage.png";

var sertifikaMesaji = "<html><body style=\"margin: 0px; height: 461px; background-image:url(" + path + ");background-repeat:no-repeat;\"><h1 style=\" margin-top:40px;margin-left:150px;\">"
+ "<span style=\"font-family:Monotype Corsiva;\"><em>Test HTML</em></span></h1><div style=\"width:560px;height:200px;margin-top:120px;margin-right:55px;margin-left:150px;\"><em>"
+ "<span style=\"font-family:Monotype Corsiva;\"><span style=\"font-size:22px;\">Some Text Here</span></span></em></div></body></html>";

var img = HtmlRenderer.HtmlRender.RenderToImage(sertifikaMesaji, maxSize);
img.Save(newPath, ImageFormat.Png);
Result:
Image
Developer
Mar 10, 2014 at 2:05 PM
In case it is still relevant, all you need to know is described here: Generate image from HTML markup
Marked as answer by ArthurTep on 3/10/2014 at 7:05 AM