Home/ Questions/Q 7746355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:15:29+00:00

I’m trying to render a html page with an image in it. I am

  • 0

I’m trying to render a html page with an image in it.

I am having an issue that current the size of the image seems to be getting doubled, my image is 304×112 and when it renders to pdf it is 607×224.

I did find this

Screen resolution is typically 96 dpi. So when you view an HTML page
on your monitor, Windows will display it at 96 dpi.

The disparity between the screen resolution and the PDF 72 dpi
resolution means that HTML appears larger in print documents than it
does on screen.

You will need to apply a scale of 72/96 (0.75) to compensate for this
if you want both to appear the same size.

For example, if you are rendering a web page supplying a value of 800
for the Width parameter, you will need to set the width of your Rect
to 600 if you want both to appear the same size.

and

PDF documents are predominantly vector-based. As such, they do not
really have a dpi because they are resolution independent. The only
portions of PDFs which are raster based are images.

Most elements of HTML – text, lines – are vector based. So they are
resolution-independent.

The resolution at which images in your web pages are rendered is
complicated. Suppose you have a 300 square image referenced by an
image tag. If the width of your Doc.Rect is the same as the width you
pass to AddImageUrl, then this will be rendered at 72 dpi. However, by
changing the ratios between these two values, the image will be scaled
and hence the resolution will be changed.

And… if your 300 square is in an img tag with a width and height of
150, then the default resolution will be doubled.

My problem seems to be what is described in the second part there.

My end result will be to add the output to a a4 portrait page so it can be printed (along with other text in the document but that is working correctly).

Currently when rendering I use this

doc.MediaBox.String = pageSize;
doc.Rect.String = pageSize;
doc.AddImageHtml(html, true, width, disableCache);

where page size is “A4” and the width is set to 800 in the addimagehtml call.

I have tried setting the doc.Rect.Width to 600 after the pagesize is set and also made the width to the addimagehtml call 800 but the image still renders incorrectly.

Is there something else I’m missing?

EDIT:
Html of page to be converted is this:

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Workpack</title> 
        <style>
             body { font-family: Arial, Helvetica, sans-serif; }
        </style>
    </head>
    <body style="border: 1px solid black;">
        <div style="height: 1100px;">
            <div style="position: absolute; top: 50%;">
                <div style="text-align: center; width: 780px;" >
                    <div>
                        <% if (!string.IsNullOrWhiteSpace(Model.CompanyLogo)){%>
                            <img src="<%: Url.ToFullyQualifiedUrl(Model.CompanyLogo) %>"/>
                            <% } %>
                    </div>
                    <div>
                        <h1><%: Model.PlantName %></h1>
                    </div>
                    <div style="font-size: 15pt; font-weight: bold;">
                        <h1><%: Model.WorkpackTitle %> - <%: Model.WorkPackNumber %></h1>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without seeing the actual HTML it’s difficult to say. The basic idea is that AddImageUrl/AddImageHtml will fill the area of the Rect, so to make the image smaller in the final output you can reduce the Rect (so that Rect is smaller than MediaBox).

    Alternatively you can reduce the width parameter. For example:

    const string kHtml = "<html><img src='https://encrypted.google.com/images/srpr/logo3w.png'></html>";

// The img gets smaller and smaller....
foreach (var i in Enumerable.Range(1, 5))
{
    using (var doc = new Doc())
    {
        doc.Rect.String = doc.MediaBox.String = "A4";
        doc.AddImageHtml(kHtml, true, 400 * i, true);
        doc.Save(i + ".pdf");
    }
}
    • 0