Welcome Guest Search | Active Topics | Sign In | Register

Relative Paths Problems and Image Quality Issues Options
BrentonW
Posted: Tuesday, August 14, 2012 6:18:08 PM
Rank: Member
Groups: Member

Joined: 8/14/2012
Posts: 10
Hi,

I'm trying out EC PDF 2012 and running into several problems:

1. Relative paths not working.
My generated HTML contains relative paths. I have set the base url like so:

HtmlToPdf.Options.BaseUrl = String.Format("file://{0}", Server.MapPath("."));

which resolves to the local path for the root of my website, as expected. However, my two external resources, a CSS file and an image are not getting resolved.

2. File sizing and Image sizing issues.
I have 3 images in my file. One is sourced locally and the other 2 come from remove websites. If I use the live demo, (http://www.essentialobjects.com/Products/EOPdf/UrlToPdf.aspx) on a URL for my generated HTML, I get a PDF as expected, and the images are the correct sizes.

As a temporary work around for problem #1, I embedded my CSS and local image resources which allowed me to generate a PDF which looked mostly ok, however (a) the file size was significantly larger than the live demo (about double) and (b) one of my external images (downloaded from an external website ) is way too big. This problem doesn't occur when generating from the live demo, but only with my code. Here is the rendering code:

HtmlToPdf.ConvertHtml(html, Server.MapPath("~/[file path].pdf"));

Any idea why either of these would be happening?

3. Image quality issues
With either the live demo or the workaround applied in #2, my embedded image (a gif) is really grainy. Note that the 2 images downloaded from other websites (png files) look fine. All the images look fine when displayed in the browser. How do I fix the grainy image?

Cheers,
Brenton
eo_support
Posted: Tuesday, August 14, 2012 7:41:19 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

Make sure you have three "/"s. For example:

Code: C#
HtmlToPdf.Options.BaseUrl = "file:///c:/images/";


The reason that it takes three "/"s is because the first two are for the protocol "file://", the third one represents "localhost". So the following syntax is also valid:

"file://server1/C$/images/"

As for image size, that most likely either has to do with your CSS or JavaScript. The HTML to PDF converter will automatically scale page so that it fits the paper at full width. So if the HTML page is 1000 pixels wide and the paper is 500 pixels wide, then the converter will apply a zoom factor of 0.5 so that the whole 1000 pixels wide page fits on a 500 pixels wide paper. This process affects the image size. You can turn this off through HtmlToPdf.Options.AutoFitX/AutoFitY property. When your CSS/JavaScript is not loaded properly, the HTML page will have a different width, thus triggering a different scale factor.

EO Html to PDF converter automatically preserves your original image resolution, which means the higher quality your original image is, the higher quality the output is. However by default the converter will try to save the image as jpeg in the PDF file. You can try to increase HtmlToPdf.Options.JpegQualityLevel. The default value is around 80. You can increase it up to 100 to see whether it helps.

Additionally, it is possible that the image quality is just fine but Adobe Reader is not displaying it right. This particular affects low resolution but pixel accurate images (such as screenshot with text). See this post for more details about this:

http://www.essentialobjects.com/forum/postst6905_Microsoft-Pie-Chart-Low-Quality.aspx

Hope this helps. Please feel free to let us know if you have any more questions.

Thanks!
BrentonW
Posted: Tuesday, August 14, 2012 8:32:55 PM
Rank: Member
Groups: Member

Joined: 8/14/2012
Posts: 10
I tried the 3 slashes, but it's still not resolving any external resources.

Re image sizing: I'm not sure I understand your response regarding image sizing. With my work around of embedding the CSS, I managed to get a PDF generated that looks roughly like it is supposed to, however, one of my 3 images is way bigger than it is supposed to be. I'm not sure how the page settings would be effecting one image and not the rest. Either way, I have my HTML set to 960px wide, but can easily adjust this. What width should it be set to for optimal PDF generation?

Re file size: your response didn't address this. Why would my generated file be 2x larger than the one generated through your live demo link?

Re image resolution: I tried setting JPEG quality to 100, but that had no effect. I could add a large source image, however, that would throw off the formatting of the document.
eo_support
Posted: Tuesday, August 14, 2012 8:52:04 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

The only other reason that can cause the converter not able to resolve external resource is permission issue. As a test, you can try to create a small console application and run it from the debugger interactively. You should see all resources resolved correctly.

As to the image size: We are not aware of any situation that would cause our converter to render the image size incorrectly. So I would recommend you to try to simplify your HTML step by step, until you can find what triggered the problem. There is no "optimal" wide we can tell you. It all depends on your HTML.

Refile size: The only thing we can think of is you are giving the converter different image files. For the same input, the result should be the same.

Image resolution: I am not sure if you understood what we told you in the "Pie Chart Low Quality" post. You may want to read it again to see if it makes sense to you. Keep in mind image resolution and image size are two totally different things. Particularlly image resolution is basically the DPI value. So you can have a 300 pixels by 300 pixels image at 300 DPI, and another 72 pixels by 72 pixels image at 72 DPI, both will be rendered as one inch by one inch in the result file. But the 300 by 300 image is a higher quality.

Thanks!
eo_support
Posted: Wednesday, August 15, 2012 9:17:09 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

We have looked into your files. As to your questions:

Relative Path Issue:

Remove the "/" at the beginning of your relative path. For example, if you have "/Assets/Css/PdfTickets.css", you should change it to "Assets/Css/PdfTickets.css". The reason is "/" represents the root of your SITE, not your baseUrl. For example, if BaseUrl I "http://www.yoursite.com/app1", then "/" represents "http://www.yoursite.com/", not "http://www.yousite.com/app1". This is rather obvious and straight forward for normal Urls. However the same rule applies to "file://" Url as well. In your case, your host name is local host, so "/" will be translated into "root of your local host", thus directly translated into "file:///", not as "file:///c:/yoursiteroot/" as you expected. The path that you added by Server.MaPath(".") is considered a path within your site, that part will be ignored when translating a relative path starting with "/".

PDF Size Issue:

This usually has to do with your fonts. We automatically embed font data into your PDF file (so that people can view the file on a machine even if that machine doesn't have your font. This is one of the most important reason why PDF is so popular). If two different servers have two different font files, then the final PDF file size will be different. Another scenario is, if you have applied your license key locally, but not on your server, then on the server we will add a license message banner to the PDF file. If the license banner uses a font that is not used anywhere else in your PDF file, then that is going to add a new font data block into the PDF file thus increases the file size. In any case, this is usually not a concern. Font data are relatively small comparing with other data such as images.

Image Quality Issue:

This has to do with your source image. Your source image has a rather odd DPI value (95 dpi). This is not only a very low value, but it’s a value that makes it hard to scale smoothly (and Adobe Reader will almost ALWAYS scale your image, see the other post we mentioned in the forum for details). PDF’s default DPI is 72. Windows’ default DPI is 96. Increase the DPI of that image will solve the problem for you. Usually you can get very good image quality if you just double the DPI.

Hope this helps. Please feel free to let us know if you have any questions.

Thanks!
BrentonW
Posted: Wednesday, August 15, 2012 8:50:53 PM
Rank: Member
Groups: Member

Joined: 8/14/2012
Posts: 10
Relative Path Issue
What you described was not the problem, however I managed to figure it out what was.

Background: the HTML I'm converting is generated by ASP.NET MVC. In the markup, any relative URLs I refer to, for example ~/Assets/Css/PdfTicket.css, will be relative to the ASP.NET application. If the application is running as the root application (which in my case it is), the resulting URL written to the markup will be /Assets/Css/PdfTicket.css, which is expected, and the correct syntax for a client (normally the browser) to be able to access the content. If it were running as a sub app (which it was not in this case) it would resolve to /subapp/Assets/Css/PfdTicket.css, again a correct relative URL.

Either way, the relative paths in the HTML should begin with /, and they will be site relative at that point in time.

The problem wasn't that the relative URLs had a / at the beginning (they should), the problem was that BaseUrl did not have a "\" on the end of it (note "/" and "\" are interchangeable in this context).

So, Server.MapPath(".") returns file:///c:\\path\\WebSite
and Server.MapPath("/") returns file:///c:\\path\\WebSite\\

Using Server.MapPath("/") works. This seems like it could be a bug in the component. The combining of the BaseUrl with the relative URL should work regardless of if the base has a trailing slash or the relative has a leading slash. The Uri() constructor has an overload that takes care of this - not sure if you're using that under the covers or not.

PDF file size
So what is the different with the 2 PDF files that I sent you? Your demo server generated a file that was 53Kb in size, and I generated a file locally that was 89Kb based on the exact same content. The locally generated file does have the "Created with EO.Pdf for .NET…" message at the bottom, so I could see it being a little bigger, but 36Kb? Is it embedding font data? Is it using different options when generating the PDF? What is causing the delta in this particular case?

Image Quality Issue
Thanks for the pointers. I ended up trying those suggestions, but they didn't really make much of a difference.

In the end I added a higher resolution source image and down-scaled it in CSS so it was displayed correctly, ie my source image is now 400px wide, but displayed at 200px wide. The resulting PDF file looks a lot better when generated from the higher resolution source image, and it is still displayed in the correct proportions.

Cheers,
Brenton
eo_support
Posted: Wednesday, August 15, 2012 9:28:20 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

I am glad that you got the relative path and image quality issue worked out.

The PDF file size difference of 36K is normal. That's exactly what that font size is. Our server applied a license so we do not have the banner message, thus produces a smaller file. As a test, you can try to use a different font in your HTML and you will see the file size increases.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.