HtmlRenderer C# not showing table border in Rendered Image - c#

In my C# code I am rendering a JPEG image of a HTML page using a string variable (which holds my html code). There's a table in that html code whose borders are not being rendered in JPEG image.
I am using the following code to generate image :-
string sHtml = m_Html; //m_Html contains the html code
Image img = HtmlRender.RenderToImage(sHtml);

After thorough searching, I understood that HtmlRenderer renders the string which we pass (as a parameter) into a HTML page and then takes a snapshot. Now, the rendering engine which HtmlRenderer uses is not very sophisticated, it does not support latest/complex CSS queries.So if you are facing this issue, use simple HTML/CSS.
If still you are not able to solve the issue, use a different library 'NReco'. NReco is open source if you just use it, licensed if you want to modify it. NReco is better than HTML Renderer.

Related

Create PDF from HTML using TheArtOfDev.HtmlRenderer.PdfSharp

I need to convert a well-formatted HTML string to a PDF document.
I found this DLL that should do what I need, but it isn't working fine on formatting.
That's the HTML code I'm trying to convert, and viewing it on browser works fine (I've used Bootstrap CSS, that's been correctly referenced as cdn).
But once converted to PDF this is the result:
And that's the code I'm using to convert it:
string html = "";
if (File.Exists(pathIN))
{
html = File.ReadAllText(pathIN);
}
PdfDocument pdfDocument = new PdfDocument();
PdfDocument pdf = PdfGenerator.GeneratePdf(html, PageSize.A4, 60);
pdf.Save(pathOUT);
Does anyone have any suggestion?
I also had issues with this when using HtmlRenderer/PdfSharp with Bootstrap controlling the layout.
Although it goes against the grain, I resorted to using tables for the layout. Given that the destination (pdf) was a obviously a fixed width, being responsive was not a requirement.
Try using https://wkhtmltopdf.org, works well for bootstrap pages.
I know its a little late but this can help someone
The problem with bootstrap is that to align the columns use float: left and pdfsharp cannot read this property instead use display: inline-block and define the width in pixels.
To avoid useless effort to other people, it doesn't work for Bootstrap like the Table even using display: inline-block to define the width. Right side of table is always trimmed, the size unfitting the letter size in my case.

HTML Reference to Image in RAM/Memory

I want to render a html-page with the C#-Webbrowser Form.
Normally I receive the html file from another application. For simplicity I just read the html page from the hard drive into a stream and then I set the webBrowserControl to this content.
That works in general. But now I want the html file to reference to images in the imageList.
I don't want to save the images to the hard drive.
Is there any possibilty to reference images in RAM with HTML.
The common way like
<img src="C:\\pic.png"/>
is obviously not possible.
Explanation Code
Image image = Image.FromFile(src_pathfile); //normally from another application over interface
List<Image> imageList = new List<Image>();
imageList.Add(image);
Stream source = File.OpenRead("C:\\Webpage.html"); //from another application
webBrowser.DocumentStream = source;
Thank you for your help in advance.
magicbasti
You can encode the image as base-64 and store it in the <img> tag itself. There's some information about it here.

drawing lines on screen?

I've been reading through a few asp.net articles, and attempting some code, but I think I may be confused. Can you or can you not draw lines on the screen with code on a ASP.NET webform using c#?
If so, can anyone direct me to some examples?
You cannot directly draw on a webform. You may draw on the image and then embed it on your webform (like any other image).
You can make a canvas and then you can draw whatever you want to draw on it.But direct drawing is impossible.
If you are fine with HTML5 you can try lineto Javascript method:
<script>
context.lineTo(100, 200);
</script>
Please refer # following link for more details:
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
Not sure what you mean by "draw a line" but if you are using a web browser you need some kind of HTML object to display this "line". If all you need is a horizontal line you can just add a HR html tag and use CSS toy stylize it. You can also include this line in an image or HTML5 Canvas.
Because there is not screen for your server side code. Your code generates HTML, JavaScript etc. and then browser uses that content to render it on the client screen. So your options are to generate image (draw all that you need) in server side code and send it to the browser, or you can use JavaScript and send browser instructions how to draw lines.
You could probably create a new image using the System.Drawing namespace classes and then do something like dynamically load it into an <img /> tag...but depending on what you're trying to accomplish it may be far easier to either use a JavaScript library of some sort or to use some sort of very simple line image and tweak the length/height using css.
More detail would be needed to understand what you're trying to do. As others have pointed out though, there's no direct way for your C# code to interact with the page. You'd have to have something on the page like an img tag and then set it's source to a C# file like a handler (.ashx). In that handler you could generate the image and then set the response content type as image/jpg and write the raw bytes to the response stream...
Again though, that seems like overkill for something that could be accomplished with CSS or javascript.

Take image of div in ASP.net

I am trying to make T-shirt design website. User customize its t-shirt by putting diffrent div and image over t-shirt div which has t-shirt in background using jquery now after final customization I want to save the picture of t-shirt/div so I can save customization.
How can i save customization div into image?
You can use the html2canvas library that can render to "canvas" your div and then make it image send it back to you.
You can get the code, and see examples here.
http://html2canvas.hertzen.com/
Here is the conversion from canvas to image for get it back:
http://www.nihilogic.dk/labs/canvas2image/
My Concerns.
What if a javascript error appears and the user lose whats make of ?
What if user not use a new modern browser that can handle the "canvas" so that can render to image whats inside the div.
The other way is to use flash and some programming on flash.
Ideally, you'll want to use server side processing to generate your images- rather than a DOM-based approached. You may want to consider using GDI+. Something along these lines should get you started (assuming the context of an ASP.NET page):
tshirt.aspx
var imagePath1 = #"C:\path\to\tshirt.jpg";
var imagePath2 = #"C:\path\to\graphic.jpg";
var bg = new Bitmap(imagePath1);
var overlay = new Bitmap(imagePath2);
var gfx = Graphics.FromImage(bg);
gfx.DrawImage(overlay, new Point(50, 50));
Response.ContentType="image/jpeg"
bg.Save(Response.OutputStream, ImageFormat.Jpeg);
Then on the page where the image is needed:
<img src="tshirt.aspx" />
Using the same code above for "tshirt.aspx", you can replace the call to bg.Save(Stream, ImageFormat) with bg.Save(filePath, ImageFormat) to write the generated image to disk.

Render HTML as an Image

I'm generating a coupon based on dynamic input and a cropped image, and I'm displaying the coupon using ntml and css right now, the problem is, printing this has become an issue because of how backgrounds disappear when printing and other problems, so I think the best solution would be to be able to generate an image based on the html, or set up some kind of template that takes in strings and an image, and generates an image using the image fed in as a background and puts the coupon information on top.
Is there anything that does this already?
This is for an ASP.NET 3.5 C# website!
Thanks in advance.
edit: It'd be great if the output could be based on the HTML input, as the coupon is designed by manipulating the DOM using jQuery and dragging stuff around, it all works fine, it's just when it comes to the printing (to paper) it has z-indexing issues.
What you can do is create an aspx page that changes the response type to be in the format you want and then put the image into the stream. I created a barcode generator that does a similar thing. Excluding all the formalities of generating the image, you'll Page_Load will look something like this:
Bitmap FinalBitmap = new Bitmap();
MemoryStream msStream = new MemoryStream();
strInputParameter == Request.Params("MagicParm").ToString()
// Magic code goes here to generate your bitmap image.
FinalBitmap.Save(msStream, ImageFormat.Png);
Response.Clear();
Response.ContentType = "image/png";
msStream.WriteTo(Response.OutputStream);
if ((FinalBitmap != null)) FinalBitmap.Dispose();
and that's it! Then all you have to do in your image is set the URL to be something like RenderImage.aspx?MagicParm=WooHoo or whatever you need. That way you can have it render whatever you want to specify.
You can render html to a bitmap using the WebBrowser control in either a winforms or console application.
An example of this can be found here: http://www.wincustomize.com/articles.aspx?aid=136426&c=1
The above example can be modified to run in ASP.Net by creating a new STAThread and performing an Application.Run on it to start a new message loop.
PHP/Ruby Alternative
If you have accessed this question and are actually looking for soething that will work without Windows, you can try the KHTML library: http://wiki.goatpr0n.de/projects/khtmld
The website has a ridiculous name I admit, but I can assure you it is genuine. Other related pages are: the sourceforge page http://khtml2png.sourceforge.net/
Try PDFSharp...it's not exactly a "take this HTML and make a PDF" but with a small amout of fiddling you can easily make a PDF out of the info you are using to make the HTML.
MARKUP ONLY ALTERNATE SOLUTION
Use SVG and XSLT to transform the html data into an image that can be rendered/saved/etc.
I'll admit that at first it was tedious getting this to work because of all of the coordinates, but well worth the effort once it is running.
There is a very powerful image creation library called GD which I often use with PHP.
I am led to believe there is a wrapper for this library that ASP programmers can use. Try this
Unless the "other problems" are pretty severe, couldn't you just instruct your users to turn on Background Images when printing?
In any case, I'd default to serving a PDF rather than an image, doubly so since it is intended for print.
Just set up your css properly, so that you have a css file targeted at the print medium. It is pretty easy to guarantee that the coupon will always be legible, without worrying about whether they have bg images on or not. Needlesly moving to an image doesn't make any sense, unless there is some reason you don't want it to be machine readable.
I haven't tried to myself, but you should be able to render HTML into an image by using the WebBrowser control and the DrawToBitmap() method inherited from the base Control class.
UPDATE: I tried this myself and there are some caveats. The WebBrowser control doesn't seem to render the web page until the control is show, so the WebBrowser needs to be in a Form and the Form must be shown for the HTML to be rendered and the DocumentCompleted event to be raised.

Categories

Resources