Изображение mPDF для покрытия страницы кадрированием и без искажений - PullRequest
Новая
       6

Изображение mPDF для покрытия страницы кадрированием и без искажений

0 голосов
/ 12 мая 2018

Я испробовал все возможные комбинации, чтобы получить что-то, что кажется таким простым в работе.

Мне нужно разместить изображение на странице формата А4 (210 мм (ч) х 297 мм (ш)), чтобы оно имело высоту 100%, т. Е. 297 мм, затем пропорционально растянуть ширину и просто обрезать переполнение (т.е. скрыто в css переполнении). Я пробовал каждую комбинацию, которую я могу придумать с $mpdf->Image(), или, как я делал везде в PDF-файле, использую чистый HTML и CSS. Э.Г. 

<img src="path(to/file.jpg" />

или 

<div style="background: url("path(to/file.jpg") center center no-repeat;"></div>

снова, со всеми возможными конфигурациями CSS, которые я могу придумать.

Разве невозможно растянуть изображение, чтобы оно соответствовало всей высоте страницы, при этом сохраняя соотношение сторон и обрезая изображение по бокам?

Я видел background-image-resize на фоне полной страницы MPDF , но опять ничего.

Как я могу получить изображение, которое будет на 100% высоты страницы (мне все равно, нужно ли мне определять высоту (например, 297 мм) или если это процент), масштабировать изображение пропорционально этому и обрезать любое избыток изображения по бокам.

Я уверен, что только что пропустил что-то очевидное здесь. Я не вижу, что я делаю не так (мне кажется, я сейчас застрял в голове).

Пример того, что хорошо отображается (как и ожидалось), если я сделаю эхо и просмотр в браузере 

$html = '<div style="
    background: url('.$imageSource.') center center no-repeat;
    position: absolute;
    overflow: hidden;
    height: 297mm;
    width: 100%;
    background-size: cover;
    top: 0;
    left: 0;
"></div>';

Однако, делая то же самое с $pdf->WriteHTML( $html, 2 ) и затем $pdf->Output(), изображение имеет высоту 297 мм, но ширина искажается (то есть оно не растягивается пропорционально высоте).

Вот итоговый PDF (с изображением-заполнителем) enter image description here

Это то, чего я пытаюсь достичь enter image description here

Таким образом, полученный PDF-файл "сжимается". Вместо увеличения ширины пропорционально высоте (297 мм).

PS. Извините за отсутствие проверенного кода. Но я пробовал так много разных комбинаций, что не могу воспроизвести их все.

PPS. Использование последней версии mPDF. Схватили с GitHub три дня назад.

1 Ответ

0 голосов
/ 14 мая 2018

Поскольку у меня было много проблем с правильной логикой, CSS и математикой, я решил поделиться своим окончательным рабочим решением здесь с кем-либо, кто борется с этим.Начните с функции 

function image( $containerWidth, $containerHeight, $imageSource, $top, $left, $border ){
// Get image width
$imageWidth             = getimagesize( $imageSource )[0];
// Get image height
$imageHeight            = getimagesize( $imageSource )[1];
// Get image aspect ratio
$imageRatio             = $imageWidth / $imageHeight;
// Get container aspect ratio
$containerRatio         = $containerWidth / $containerHeight;
// Decide if image should increase in height or width
if( $imageRatio > $containerRatio ){
    $width                  = ( ( $imageRatio / $containerRatio ) * 100 );
}else{
    $width                  = ( ( $containerRatio / $imageRatio ) * 100 );
}
if( $border ){
    // $border array: 0 = thicknes in points, 1 = type (solid, dotted etc), 2 = color
    $border = 'border: '.$border[0].'pt '.$border[1].' '.$border[2].';';
}
return '<div style="position: absolute; top: '.$top.'mm; left: '.$left.'mm; width: '.$containerWidth.'mm; height: '.$containerHeight.'mm; overflow:hidden; margin:0;'.$border.'"><img src="'.$imageSource.'" style="width: '.$width.'%; margin: 0 -'.( ( $width - 100 ) / 2 ).'%;" /></div>';
}

Затем для центрированного полного изображения страницы 

$image1                     = image( 210, 297, $imageSource[0], 0, 0, null );

Или двух изображений друг над другом, одно с белой рамкой 

$image2                     = image( 105, 148, $imageSource[1], 15, 15, null );
$image3                     = image( 105, 148, $imageSource[2], 133, 90, [ 10, 'solid', 'white' ] );

Выход 

// mPDF options array
$pdfOptions = array(
    'mode'              => 'utf-8',
    'format'                => 'A4',
    'img_dpi'               => 300,
    'dpi'                   => 300,
);
// Declare $pdf and set options
$pdf                    = new \Mpdf\Mpdf( $pdfOptions );
// Stylesheets
$style                  = file_get_contents( __DIR__ . '/path/to/stylesheet.css');
$pdf->WriteHTML( $style, 1 );
$pdf->WriteHTML( $image1, 2 );
$pdf->AddPage();
$pdf->WriteHTML( $image2, 2 );
$pdf->WriteHTML( $image3, 2 );
$pdf->Output();
...