MPDF 文档和图像 DPI 问题
Posted
技术标签:
【中文标题】MPDF 文档和图像 DPI 问题【英文标题】：MPDF document and Image DPI problems 【发布时间】：2014-10-10 10:06:31 【问题描述】：背景： 我正在尝试使用 mPDF 库以 300dpi 渲染名片。文档有一个图像背景，应该填满画布，然后覆盖各种文本元素。
尺寸： PDF 文档设置为 91 毫米 x 61 毫米，为横向格式。
$pdf = new mPDF('utf-8', array(91,61), 0, '', 0, 0, 0, 0, 0, 'L');
我在配置中设置了如下分辨率；
$this->dpi = 300;
$this->img_dpi = 300
我已经在 Photoshop 中创建了一个图像，也是 300dpi，尺寸与卡片相同（91 毫米 x 61 毫米）。
我尝试使用如下标记将图像添加到 div 内的文档中：
$html .= '<div style="position: absolute; left:0; right: 0; top: 0; bottom: 0;width:100%; height:100%"><img style="width:100%; height:100%" src="/assets/images/bg.jpg"></div>';
显示 PDF 文档时，图像似乎比文档小，即未缩放以适合页面。事实上，图像在 X 和 Y 方向上似乎只占画布的大约 55-60%。
当我保存 PDF 文档并在 Adobe Reader 中查看它的属性时，它被确认为 91x61mm 的正确尺寸。
有没有人遇到过类似的问题或了解这里发生了什么？
我真的需要能够有一个 300dpi 的图像，它会完全填满页面。
期待您的建议。
问候
詹姆斯
【问题讨论】：
【参考方案1】：您拥有的 css 样式与手册中“大小约束”部分中的 recommendation 中的样式不完全匹配
在我的例子中，我在 photoshop 中有一个 11x8.5 英寸 150dpi 的横向图像，它在 mpdf 中匹配为页面大小，我将 css 分开以保持清洁
以防万一，我指定了任何其他 mpdf 值或 css 设置
所以尝试一些更适合我的代码，使用 css 定位文本并根据需要调整 dpi/页面大小：
$html = '
<html>
<head>
<style>
body
position: relative;
text-align: center;
overflow: hidden;
page-break-inside: avoid;
#bg
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
#bg img
width: 100%;
height: 100%;
margin: 0;
#text1
top: 20%;
font-size: 20pt;
position: absolute;
width: 100%;
color: #fff;
#text2
top: 60%;
font-size: 16pt;
position: absolute;
width: 100%;
color: #ddd;
</style>
</head>
<body>
<div id="bg">
<img src="bg.png" />
</div>
<div id="text1">John Smith</div>
<div id="text2">555-5555</div>
</body>
</html>';
$mpdf = new mPDF('UTF8','Letter-L',14,'Arial',0,0,0,0,0,0);
$mpdf->dpi = 150;
$mpdf->img_dpi = 150;
$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
当然有一种更简单的方法来制作背景...告诉 body 或 html 在 css 中拥有背景图片，但随后您遇到 this bug 所以这不是我的第一个建议
【讨论】：
以上是关于MPDF 文档和图像 DPI 问题的主要内容，如果未能解决你的问题，请参考以下文章