Проблемы с документами MPDF и изображениями DPI
Фон:
Я пытаюсь сделать визитку с разрешением 300 точек на дюйм, используя библиотеку mPDF. Документ имеет фоновое изображение, которое должно заполнить холст, а затем наложить различные текстовые элементы.
Размеры:
Документ 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
Я создал изображение в фотошопе, также с разрешением 300 точек на дюйм и теми же размерами, что и карта (91 мм х 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, изображение кажется меньше, чем документ, т. Е. Оно не масштабируется по размеру страницы. На самом деле изображение только кажется заполнить примерно 55-60% холста в направлениях X и Y.
Когда я сохраняю PDF-документ и смотрю на его свойства в Adobe Reader, он подтверждается правильным размером 91×61 мм.
У кого-нибудь была похожая проблема или вы понимаете, что здесь происходит?
Мне действительно нужно иметь изображение с разрешением 300 точек на дюйм, которое будет точно заполнять страницу.
Я с нетерпением жду ваших предложений.
С уважением
Джеймс
Решение
стили CSS, которые у вас есть, не полностью совпадают со стилями руководства рекомендация в разделе «ограничение размера»
в моем случае у меня есть фото в альбомной ориентации 11×8.5 дюймов 150 точек на дюйм, что соответствует mpdf как размеру страницы, я выделил css для чистоты
на всякий случай я указал любые другие значения mpdf или настройки css
так что попробуйте что-то вроде этого кода, который работает для меня, поместите текст с помощью CSS & отрегулируйте размер страницы / дюйм при необходимости:
$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, но затем вы сталкиваетесь с эта ошибка так что это не моя первая рекомендация
Другие решения
Других решений пока нет …