abcpdf html 图像拉伸

Question

I'm trying to render a html page with an image in it.我正在尝试呈现一个包含图像的 html 页面。

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.我有一个问题，当前图像的大小似乎增加了一倍，我的图像是 304x112，当它渲染到 pdf 时它是 607x224。

I did find this我确实找到了这个

Screen resolution is typically 96 dpi.屏幕分辨率通常为 96 dpi。 So when you view an HTML page on your monitor, Windows will display it at 96 dpi.因此，当您在显示器上查看 HTML 页面时，Windows 将以 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.屏幕分辨率与 PDF 72 dpi 分辨率之间的差异意味着 HTML 在打印文档中看起来比在屏幕上大。

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.如果您希望两者显示相同的大小，则需要应用 72/96 (0.75) 的比例来对此进行补偿。

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.例如，如果您正在渲染一个 web 页面，为 Width 参数提供 800 的值，如果您希望两者显示相同的大小，则需要将 Rect 的宽度设置为 600。

and和

PDF documents are predominantly vector-based. PDF 文档主要是基于矢量的。 As such, they do not really have a dpi because they are resolution independent.因此，它们实际上并没有 dpi，因为它们与分辨率无关。 The only portions of PDFs which are raster based are images. PDF 中唯一基于光栅的部分是图像。

Most elements of HTML - text, lines - are vector based. HTML 的大多数元素——文本、线条——都是基于矢量的。 So they are resolution-independent.所以它们与分辨率无关。

The resolution at which images in your web pages are rendered is complicated.呈现 web 页面中的图像的分辨率很复杂。 Suppose you have a 300 square image referenced by an image tag.假设您有一个由图像标签引用的 300 平方图像。 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.如果您的 Doc.Rect 的宽度与您传递给 AddImageUrl 的宽度相同，那么它将以 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.并且... 如果你的300平方在宽高为150的img标签中，那么默认分辨率会翻倍。

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).我的最终结果是将 output 添加到 a4 纵向页面，以便打印（与文档中的其他文本一起打印，但工作正常）。

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.其中页面大小为“A4”，宽度在 addimagehtml 调用中设置为 800。

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.我已经尝试在设置页面大小后将 doc.Rect.Width 设置为 600，并且还使 addimagehtml 调用的宽度为 800，但图像仍然呈现不正确。

Is there something else I'm missing?还有什么我想念的吗？

EDIT: Html of page to be converted is this:编辑：要转换的页面 Html 是这样的：

<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>

Answer 1

Without seeing the actual HTML it's difficult to say.没有看到实际的 HTML 很难说。 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 ).基本思想是AddImageUrl / AddImageHtml将填充Rect的区域，因此要使最终 output 中的图像变小，您可以缩小Rect （以便Rect小于MediaBox ）。

Alternatively you can reduce the width parameter.或者，您可以减少width参数。 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");
    }
}

abcpdf html 图像拉伸

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-04-05 02:57:12

abcpdf html 图像拉伸

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-05 02:57:12

解决方案1
1 已采纳 2012-04-05 02:57:12