abcpdf html image stretching

Question

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 304x112 and when it renders to pdf it is 607x224.

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>

I've also tried setting the addimagehtml width and the rect.width both the same to 595 and 800 with no change — Daniel Powell, Apr 04 '12 at 11:40
can you not just use the doc.rendering options and set the pdf to be 72 dpi ?? — davethecoder, Apr 17 '12 at 21:13

kizzx2 · Accepted Answer · 2012-04-05T03:02:44.243

1

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

edited Apr 05 '12 at 03:02

answered Apr 05 '12 at 02:57

kizzx2

18,775
14
76
83

I've added the html, its pretty straightforward nothing fancy – Daniel Powell Apr 05 '12 at 04:04
So it should be pretty equivalent to the HTML with Google logo above? If that's the case maybe we can use the simpler HTML for testing. Does running the above code give you the scaling effect so you can counter the image resolution problem? – kizzx2 Apr 05 '12 at 09:22
looks like it does give me the scaling effect, now to just figure out the correct value to make it look the same size as when viewed on a webpage – Daniel Powell Apr 09 '12 at 22:48
ended up getting it working however I had to make my text bigger as well as everything on the page was scaled down, so the text size is a bit inconsistent with the other pages that haven't had to be scaled the same way as they don't have images. – Daniel Powell Apr 10 '12 at 02:27
@DanielPowell Even though this is quite unexpected, maybe you could simply scale the `` tag itself? Again it could be difficult to tell what's going on but if you send a full isolated test case (with an exe and the HTML + images/CSS) to ABCpdf's support email then possibly a more elegant solution could be found. – kizzx2 Apr 10 '12 at 02:51
yeah scaling the image tag was my next fallback – Daniel Powell Apr 10 '12 at 04:42
@kizzx2 do you have ide about below issue http://stackoverflow.com/questions/22069825/abcpdf-not-showing-full-table-data – SivaRajini Mar 18 '14 at 18:06

abcpdf html image stretching

1 Answers1